第一次使用mui框架制作web app项目的一些心得

本人在写写这篇文章的到时候使用的是mui的3.3版本

GitHub上的mui是3.6版本，如下的是github项目地址，大家可以下载
https://github.com/dcloudio/mui

总体感觉各种动画效果很流畅，demo很丰富，api也很详细，提供的组件也很全
但是由于主要针对的是native，所以在制作web的时候还是会遇见一些问题

---

一、a标签链接跳转失效

**解决方法：**可在你自己的js文件里加上如下代码
javascript 代码

mui('body').on('tap', 'a', function() {
       //如果遇到特殊跳转连接 例如header自带弹出侧拉导航菜单按钮  需要排除
	if(this.id != "offCanvasBtn"){ 
		document.location.href = this.href;
	}
});

---

二、下图为官网api提供的侧拉导航显示隐藏的监听事件shown 和 hidden 实际使用过程中并无任何作用 谨慎使用

---

三、官网api提供的返回顶部的代码实际使用中无效 如下
javascript 代码

mui('.mui-scroll-wrapper').scroll().scrollTo(0,0,100);

解决方法：
javascript 代码

mui('#offCanvasContentScroll').scroll().scrollTo(0,0,100);

---

四、如果使用侧拉导航框架dom结构（如下代码） 会导致正文中所有的文案图片的长按复制保存等功能失效
html 代码

<div class="mui-off-canvas-wrap mui-draggable">
	<!--侧拉导航HTML-->
	<div class="mui-inner-wrap">
		<!--正文HTML-->
	</div>
</div>

解决方法：
可以在mui.js(或mui.min.js)里搜索如下代码部分
javascript 代码

preventDefaultException:{tagName:/^(INPUT|TEXTAREA|BUTTON|SELECT|VIDEO)$/}},d)

然后在需要例外的tagName里加上你需要的标签，比如IMG、P等；
javascript 代码

preventDefaultException:{tagName:/^(INPUT|TEXTAREA|BUTTON|SELECT|VIDEO|IMG|P)$/}},d)

---

五、一个比较特殊的坑
当选择侧滑导航的动画样式为 “主界面不动、菜单移动” （对应类样式 mui-slide-in）的时候
如果是导航菜单位置在左侧，那么如果由于误操作，不小心先稍微向左滑动一下的话（如果在右侧就是先向右滑了），那么通过绑定点击事件弹出菜单的按钮将失效

官网demo地址
http://dcloud.io/hellomui/examples/offcanvas-drag-right.html

此示例中的 先选择动画样式为 “主界面不动、菜单移动” 然后再向左滑动 那么下图所框选的中间蓝色按钮弹出侧拉导航功能无效

ps:顺便说下 侧拉导航的弹出/或隐藏的手势 不是左右滑动（swiper） 而是拖动（drap）