轻量
追求性能体验，是我们开始启动MUI项目的首要目标，轻量必然是重要特征；
MUI不依赖任何第三方JS库，压缩后的JS和CSS文件仅有100+K和60+K
原生UI
鉴于之前的很多前端框架（特别是响应式布局的框架），UI控件看起来太像网页，没有原生感觉，因此追求原生UI感觉也是我们的重要目标
MUI以iOS平台UI为基础，补充部分Android平台特有的UI控件
流畅体验
1.下拉刷新
为实现下拉刷新功能，大多H5框架都是通过DIV模拟下拉回弹动画，
在低端android手机上，DIV动画经常出现卡顿现象（特别是图文列表的情况）；
mui通过双webview解决这个DIV的拖动流畅度问题；
拖动时，拖动的不是div，而是一个完整的webview（子webview），回弹动画使用原生动画。
2.侧滑导航
mui提供了两种侧滑导航实现：webview模式和div模式，
两种模式各有优劣，适用于不同的场景。
每种侧滑实现模式，有不同的侧滑动画效果，主要分为四类：
- 动画1：主界面移动、菜单不动
- 动画2：主界面不动、菜单移动
- 动画3：主界面和菜单同时移动
- 动画4：缩放式侧滑（类手机QQ）
滑动触发操作菜单
在手机应用中（特别是iOS平台），很多操作菜单都是滑动触发的，
比如短信界面，左滑显示“删除”按钮，点击可以删除该短信对话；
邮件列表界面，左滑可以删除，右滑可以标注为"已读/未读"状态；
mui的列表控件也支持滑动触发操作菜单功能，仅需按照特定格式拼装DOM结构即可；
另外，滑动还支持事件触发，
开发者可以通过监听滑动事件（slideleft/slideright），完成操作前的确认提醒工作。
代码以及详细解释如下：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--设置页面的视口宽度-->
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<!--导入页面所需要的MUI的CSS文件-->
<link href="css/mui.min.css" rel="stylesheet" />
</head>
<body>
<!--导入页面所需要的MUI的JS文件-->
<script src="js/mui.min.js"></script>
<script type="text/javascript">
// MUI页面初始化函数
mui.init()
</script>
</body>
</html>
相关学习资料网址:HTML5+ API文档：http://www.html5plus.org/doc/zh_cn/android.html
HTML5+ API缓存：http://www.dcloud.io/docs/api/zh_cn/cache.html
阿里巴巴矢量图标库：http://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.1
扫一扫
1057
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
