mui框架学习笔记（mui 教程）

一、注意事项

1.固定栏靠前，带有.mui-bar属性的节点,固定栏都是基于fixed定位的元素；常见组件包括：顶部导航栏（.mui-bar-nav）、底部工具条(.mui-bar-footer)、底部选项卡（.mui-bar-tab），固定栏要放在.mui-content元素之前。

2.除固定栏之外的一切内容都要包括在.mui-content元素中，否则就会被固定栏遮罩。防止.mui-content被固定栏遮挡，需要定义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;

}

3.始终为button按钮添加type属性，默认type=submit逻辑处理，这样若将没有type的button放在form表单中，点击按钮就会执行form表单提交，页面就会刷新。

二、窗口管理

1.页面初始化：必须执行mui.init方法;因为mui在页面初始化时，初始化了很多参数配置（按键监听、手势监听等）。

2.页面跳转：抛弃href跳转;若页面DOM尚未渲染完毕，页面会先显示空白,所以使用mui.openWindow方法打开一个新的webview，mui会自动监听新页面的loaded事件，加载完毕，再自动显示新页面，提高了用户体验；

3.页面关闭：勿重复监听backbutton；mui框架自动封装了页面关闭逻辑，若希望自定义返回逻辑，则需要重写mui.back方法，切勿通过addEventListener添加backbutton监听，因为addEventListener只会增加新的执行程序。

三、手势操作

1.mui中的点击事件代码：element.addEventListener('tap',function(){//点击响应逻辑});这样解决了300毫秒的延时。

四、mui框架中页面间传值

1.页面初始化时，通过extras配置参数，设置页面参数，从而实现页面间传值；

会进行页面初始化的情况：

- 通过mui.openWindow()打开新页面（若目标页面为已预加载成功的页面，则在openWindow方法中传递的extras参数无效）；

- 通过mui.init()方法创建子页面；

- 通过mui.init()方法预加载页面；

- 通过mui.preload()方法预加载页面