MUI初体验

        最近有个项目用到了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框架的初体验，使用感觉挺好的，特别适合移动端的开发。便捷高效，给作者赞一个。

转载于:https://my.oschina.net/u/3463305/blog/1490527