mui开发注意事项,有需要的朋友可以参考下。

mui是一个高性能的HTML5开发框架,从UI到效率,都在极力追求原生体验;这个框架自身有一些规则,刚接触的同学不很熟悉,特总结本文;想了解mui更详细的信息,请访问mui官网

DOM结构 关于mui页面的dom,你需要知道如下规则。

定栏靠前
所谓的固定栏,也就是带有.mui-bar属性的节点,都是基于fixed定位的元素;常见组件包括:顶部导航栏(.mui-bar-nav)、底部工具
条(.mui-bar-footer)、底部选项卡(.mui-bar-tab);这些元素使用时需遵循一个规则:放在.mui-content元素之
前,即使是底部工具条和底部选项卡,也要放在.mui-content之前,否则固定栏会遮住部分主内容;
### 一切内容都要包裹在mui-content中
除了固定栏之外,其它内容都要包裹在.mui-content中,否则就有可能被固定栏遮罩,原因:固定栏基于Fixed定位,不受流式布局限制,普通内容依然会从top:0的位置开始布局,这样就会被固定栏遮罩,mui为了解决这个问题,定义了如下css代码:

	.mui-bar-nav ~ .mui-content {
padding-top: 44px;
}
.mui-bar-footer ~ .mui-content {
padding-bottom: 44px;
}
.mui-bar-tab ~ .mui-content {
padding-bottom: 50px;
}

你当然可以通过自定义CSS的方式实现如上类似效果,但为了使用简便,建议将除固定栏之外的所有内容,全部放在.mui-content中。
始终为button按钮添加type属性 若button按钮没有type属性,浏览器默认按照type=submit逻辑处理,这样若将没有type的button放在form表单中,点击按钮就会执行form表单提交,页面就会刷新,用户体验极差。
窗口管理 页面初始化:必须执行mui.init方法 mui在页面初始化时,初始化了很多参数配置,比如:按键监听、手势监听等,因此mui页面都必须调用一次mui.init()方法;

面跳转:抛弃href跳转
当浏览器加载一个新页面时,若页面DOM尚未渲染完毕,页面会先显示空白,然后等DOM渲染完毕后,再显示具体内容,这是WEB浏览器技术无法逾越的体验
障碍;为解决这个问题,建议使用[mui.openWindow方法](http://dcloudio.github.io/mui
/javascript/#openwindow)打开一个新的webview,mui会自动监听新页面的loaded事件,若加载完毕,再自动显示新页
面;扩展阅读:

页面关闭:勿重复监听backbutton mui框架自动封装了页面关闭逻辑,若希望自定义返回逻辑(例如编辑页面的返回,需用户确认放弃草稿后再执行返回逻辑),则需要重写mui.back方法,切勿简单通过addEventListener添加backbutton监听,因为addEventListener只会增加新的执行程序,mui默认封装的监听执行逻辑依然会继续执行,因此若仅addEventListener添加用户确认框,则用户即使选择了取消,也会继续关闭窗口。


势操作 点击:忘记click 快速响应是mobile
App实现的重中之重,研究表明,当延迟超过100毫秒,用户就能感受到界面的卡顿,然而手机浏览器的click点击存在300毫秒延迟(至于为何会延
迟,及300毫秒的来龙去脉,请自行谷百),mui为了解决这个问题,封装了tap事件,因此在任何点击的时候,请忘记click及onclick操作,
统统使用如下代码:

element.addEventListener('tap',function(){
//点击响应逻辑
});

最新文章

  1. 代码的坏味道(14)——重复代码(Duplicate Code)
  2. 高级javascript---严格模式
  3. scrapy2_初窥Scrapy
  4. .NET 反射的使用
  5. Smarty模板
  6. hdu 4681
  7. C#使用WinAPI 修改电源设置,临时禁止笔记本合上盖子时睡眠
  8. C#秘密武器之扩展方法
  9. CJOJ 2255 【NOIP2016】组合数问题 / Luogu 2822 组合数问题 (递推)
  10. 面试题收集---grep和find的区别
  11. [转]解析多级json数据为list中嵌套一级字典的形式
  12. Codeforces780C
  13. celery4+django2定时任务
  14. DBlink 创建 删除 脚本
  15. Shiro笔记(三)授权
  16. random模块,time模块,os模块,sys模块
  17. 确保线程安全下使用Queue的Enqueue和Dequeue
  18. Oracle 分析函数的使用(主要是rollup用法)
  19. static 和 final
  20. peda的官方文档说明

热门文章

  1. 实践最简单的项目:WC
  2. IT行业果真跳槽快吗?
  3. PDF
  4. Linux下安装gcc和g++
  5. 【Hibernate】Hibernate系列3之配置文件详解
  6. c# 如何处理自定义消息
  7. PAT 1026
  8. 练习--python中的Queue与多进程(multiprocessing)
  9. 基于异步的MVC webAPI控制器
  10. POJ3623:Best Cow Line, Gold(后缀数组)
  11. DLL and LIB
  12. PHP垃圾回收机制
  13. select(Linux 编程)
  14. PHP 函数漏洞总结
  15. 贝叶斯定理推导(Bayes' Theorem Induction)
  16. R 544
  17. RabbitMQ for CentOS安装教程
  18. Step6:SQL Server 数据变更时间戳(timestamp)在复制中的运用
  19. Zabbix3.2下Template App Zabbix Server+Template OS Linux Item
  20. MyEclipse 2017 CI 9 发布(附下载)