touch ui:基于vue的移动端ui框架 -pg电子游戏网站

0顶
0踩

touch ui:基于vue的移动端ui框架

2018-05-31 09:01 by 见习记者 uileader 评论(0) 有10398人浏览

 

hi,我们做了一款高质量的、免费的移动端ui框架。

经过将两年多开发和项目实践,我们终于把touch ui开放出来了。这是一套基于vue.js打造的移动端ui框架,包含近百种组件,几乎囊括了开发移动应用的所有细节

 

touchui 有何亮点?

 

我们认为,一套足够好的移动端ui框架应该满足4个要素。

 

1、丰富的组件和易用的api

 

我们在做这套ui框架时,分析了大量的主流的移动应用,从中抽象出将近100种组件。囊括了容器布局、切换、模态、表单、列表、文本、多媒体、图形图表、地图等各个方面。我们希望开发者在开发移动应用时,不必把精力花在到处找组件、处理兼容等事情上,而是能够专注于业务,真正实现组件拿来即用,像搭积木一样开发移动应用。

 

 

2、友好的移动交互

 

跟pc开发不同,移动端的ui应该具备友好的移动端交互,例如上拉下拉、手指滑屏、按下滑动等等。我们在这些方面做了充分的考虑,每个组件都是针对移动端精心打造,追求原生级别的操作体验。

 

 

3、优秀的性能

 

如何在功能丰富的基础上还能保证高性能,是我们做这套框架的一个很大挑战。为此,我们做了大量的工作来优化性能,例如按需编译、资源拆分加载等等。现在基本可以达到点击页面秒开的效果。

 

4、良好的开发体验

 

前端工程化的出现,大大提高了前端项目的开发效率并降低维护成本,但对于完全没有经验的传统前端工程师来说,各种的环境配置和依赖安装还是有不小的门槛。基于微软vscode编辑器的插件机制,我们把前端工程化所需要的做的各种构建、编译环节全部封装起来,给开发者提供可视化右键菜单,从而简化环境配置并降低入门门槛。同时,touch ui框架和组件也都在插件里面,这样当框架有升级时,开发者通过在线升级插件的方式就可以更新touch ui,非常方便。

 

 

one more thing

 

我们同时还推出了一套微信小程序ui框架:touchui-wx,它增加了30多种常用的组件用于官方组件的补充,并且扩充了不少功能,例如支持阿里的iconfont矢量图标库,支持less语法等。

最重要的是,你可以将touch ui工程与touchui-wx工程相互进行转换。实现开发一套代码,发布h5和微信小程序两种应用。

 

pg电子游戏网站官网:

github:

0
0
评论 共 0 条 请登录后发表评论

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • //msgtarget :'title' //显示一个浏览器原始的浮动提示信息 //msgtarget :'under' //在字段下方显示一个提示信息 //msgtarget :'side' //在字段的右边显示一个提示信息 //msgtarget :'none' //不显示提示信息...

  • 首先是一个简单的demonew ext.panel({title:'panel学习',width:300,height:200,html:"panel的内容",renderto:ext.getbody()});效果如图: 下面是一些常用的参数://配置参数(只列举部分常用参数)1.autoload:有效的...

  • xtype: treepanelvar store = ext.create('ext.data.treestore', { root: { expanded: true, children: [ { text: 'detention', leaf: true }, { text: 'homework', ex...

  • var north = ext.getcmp("welcome-north-panel").body;north .update().setstyle(background, #f0f0f0); 

  • ext.panel主要配置表: animcollapse boolean 设置面板折叠展开是否显示动画,ext.fx可用默认true,否则false applyto mixed 面板定位 autodestroy boolean 是否自动销毁从容器中移除组件(默认true) autoheight ...

  • 1:最近有个疑问对viewport...2:想在title上当用户登录的时候显示点信息啥的 3:开始通过json的方式,因为panel的配置是json的配置,发现无效,后来发现一个方法 settitle() 搞定 4:知识就是在于积累。。记在这里吧

  • 面板ext.panel使用 概要 1、ext.panel概述 2、面板的五大组成部分 3、面板的特点 4、面板中的内容 5、面板内容动态控制 6、api概述   1、ext.panel概述 面板panel是extjs控件的基础,很多高级控件...

  • 效果图:   <html> <head> <meta http-equiv="content-type" content="...title>04.form</title> <link rel=

  • 首先说明引用背景:需要通过柱状图或者饼图来比较多个公司在营业额、研发投入、产量、等方面的数据,由于比较的方面较多,不能够一次在图表中全部显示,如下图: 若需要比较的数据只有3到5个则可以如下实现,但是当...

  • ext panel 使用过delphi、visual basic或java swing等开发语言的读者对面板(panel)一定非常熟悉,我们可以在面板随意地排版布局,它就像是一副骨架撑起了整个用户界面,在extjs中面板同样起着页面骨架的作用...

  • ext.window属性详细信息 ext.window扩展自ext.panel,其xtype值为window。 1、主要配置项 closable:是否允许关闭窗口,默认为true。  closeaction:关闭窗口的动作,包括以下两种:  close:从dom删除窗口,...

  • title:标题,这里可以自定义窗口显示的文字。 collapsed:是否可折叠 true:折叠 false不折叠 collapsible:是否显示折叠按钮 true:显示 false:不显示 draggable:是否可拖曳 true:可以 false不可以 html:设置...

  • 我刚才禁不住诱惑去看了一下ext.window的api文档,发现只是比panel多了点什么最大化、最小化、关闭、置前、置后、动画引发目标设置、可调整大小这些功能。像什么标题栏、工具栏之类的东西在ext.panel早就封装好了。...

  • ext panel设置背景图片以及页面居中

  • 2、写一个ext.tab.panel 的属性吧, ext.tab.panel页签组件的每个tab都是一个ext.panel.panel,一般情况会有多个tab同时存在,但是同一时刻只有一个处于激活状态,就是说,每一个tab底下是对应一个item的,默认情况...

  • 文章目录问题提出问题解决实例代码 关于ext js的view model,参见: ...使用viewmodel的data属性可以绑定数据和视图的显示,类似: data : { firstname : ‘chen’, lastname : ‘oscar’ } 但是如果使用jsonsto...

  • 在ext api中找到grid.panel的hide()方法,如图所示,发现panel隐藏了,但是标题却没有隐藏, 然后找到设置标题的方法settitle(“”),发现文字隐藏掉了,但是后面的背景没有隐藏掉,显然也是不行的 /** * ...

  • [code="js"] ext.onready(function () {  var panel = new ext.panel({  layout: 'table', //table 布局  layoutconfig: { columns: 4 }, //四列  title...

  • ext.tabpanel页签关闭时,ext.tabpanel本身已经从dom中销毁了,但是其上的子项,比如嵌入的grid,panel等依然存在,如果创建时为这些子项设置了id属性,那么当你再次创建ext.tabpanel时,就会报id重复的错误,如果不...

  • 今天我来和大家分享一下最近学习extjs的成果,这两天主要是对panel组件的...var p=new ext.panel({  title:'my panel',//标题  collapsible:true,//右上角的收缩按钮,设为false则不显示  renderto:'container'

global site tag (gtag.js) - google analytics
网站地图