最接近ios设计风格的移动端页面前端框架-mui

很早的时候看朋友编写一个app前端页面的时候就接触到mui了。然后在最近的一次项目页面开发中正式体验了一番这款框架。

<u style="box-sizing: border-box;">先来个预览看看</u>

<iframe height="568" src="http://www.dcloud.io/hellomui" frameborder="0" scrolling="no" style="box-sizing: border-box;"></iframe>

框架特点：

1.轻量

追求性能体验，是我们开始启动MUI项目的首要目标，轻量必然是重要特征；MUI不依赖任何第三方JS库，压缩后的JS和CSS文件仅有100+K和60+K。

2.原生UI

鉴于之前的很多前端框架（特别是响应式布局的框架），UI控件看起来太像网页，没有原生感觉，因此追求原生UI感觉也是我们的重要目标MUI以iOS平台UI为基础，补充部分Android平台特有的UI控件。

3.流畅体验

3.1下拉刷新

image

为实现下拉刷新功能，大多H5框架都是通过DIV模拟下拉回弹动画，在低端android手机上，DIV动画经常出现卡顿现象（特别是图文列表的情况）； mui通过双webview解决这个DIV的拖动流畅度问题；拖动时，拖动的不是div，而是一个完整的webview（子webview），回弹动画使用原生动画。 <u style="box-sizing: border-box;">查看详细介绍</u>

3.2侧滑导航

mui提供了两种侧滑导航实现：webview模式和div模式，两种模式各有优劣，适用于不同的场景。每种侧滑实现模式，有不同的侧滑动画效果，主要分为四类：

• 动画1：主界面移动、菜单不动
• 动画2：主界面不动、菜单移动
• 动画3：主界面和菜单同时移动
• 动画4：缩放式侧滑（类手机QQ）

<u style="box-sizing: border-box;">查看详细介绍</u>

image

3.3滑动触发操作菜单

image

在手机应用中（特别是iOS平台），很多操作菜单都是滑动触发的，比如短信界面，左滑显示“删除”按钮，点击可以删除该短信对话；邮件列表界面，左滑可以删除，右滑可以标注为"已读/未读"状态； mui的列表控件也支持滑动触发操作菜单功能，仅需按照特定格式拼装DOM结构即可；另外，滑动还支持事件触发，开发者可以通过监听滑动事件（slideleft/slideright），完成操作前的确认提醒工作。