最近有个项目用到了MUI框架。感觉这个框架确实很强大啊,涵盖的功能很全面。项目里的需要基本都通过框架解决了。MUI配合Hbuilder一起使用,简直有种飞一样的感觉,省时省心。
当然在使用该框架的过程中,同样也遇到了一些问题,下面就来分享下。
- 关于<a>标签
MUI是一个移动端框架,很多思维都是移动端优先。框架默认禁用了<a>标签的跳转功能。主要是<a>标签跳转页面时,手机页面会出现白屏,影响用户观感。
并且不推荐使用click及onclick操作,快速响应是mobile App实现的重中之重,研究表明,当延迟超过100毫秒,用户就能感受到界面的卡顿,然而手机浏览器的click点击存在300毫秒延迟(至于为何会延迟,及300毫秒的来龙去脉,请自行谷百),mui为了解决这个问题,封装了tap事件,因此在任何点击的时候,请忘记click及onclick操作,统统使用如下代码:
mui('body').on( 'tap' , 'a' , function(){
//业务逻辑
} )
但是有时候,项目的具体情况是需要保留<a>标签的跳转功能。总不能一个个去给<a>标签绑定“tap”事件吧。利用绑定事件代理,给所有的<a>标签绑定“tap”事件,一步到位。
// 监听tap事件,解决 a标签 不能跳转页面问题
mui('body').on('tap','a',function(){
document.location.href=this.href;}
);
- 关于list组件
在使用list组件时,当内容比较长,超出屏幕范围的时候。默认状态下,不能拖动上翻,也没有滚动条。可以用以下方法解决。
//内容过长是可以滚动
(function($){
$(".mui-scroll-wrapper").scroll({
bounce: false,//滚动条是否有弹力默认是true
indicators: false, //是否显示滚动条,默认是true
});
})(mui);
- 关于侧滑菜单
需求是点击右上角汉堡图标,弹出侧边栏导航菜单。MUI默认的是右滑就可以唤出菜单,而然需求并不需要这样,需要禁用掉右划唤出菜单功能。代码如下:
var offCanvasInner = offCanvasWrapper[0].querySelector('.mui-inner-wrap');
offCanvasInner.addEventListener('drag', function(event) {
event.stopPropagation();
});
以上是关于MUI框架的初体验,使用感觉挺好的,特别适合移动端的开发。便捷高效,给作者赞一个。