侧滑菜单,菜单容器加上id对应mui-icon的href,菜单滑动,主界面不滑动
<div class="mui-off-canvas-wrap mui-draggable mui-slide-in">
<!-- 菜单容器 -->
<aside class="mui-off-canvas-left" id="offCanvasSide">
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
<!-- 菜单具体展示内容 -->
...
</div>
</div>
</aside>
<!-- 主页面容器 -->
<div class="mui-inner-wrap">
<!-- 主页面标题 -->
<header class="mui-bar mui-bar-nav">
<a class="mui-icon mui-action-menu mui-icon-bars mui-pull-left" href="#offCanvasSide"></a>
<h1 class="mui-title">标题</h1>
</header>
<div class="mui-content mui-scroll-wrapper">
<div class="mui-scroll">
<!-- 主界面具体展示内容 -->
...
</div>
</div>
</div>
</div>
监听点击事件
mui('body').on('tap', '[onclick]', function(){
// 获取onclick
let fuc = $(this).attr('onclick');
// 执行
eval(fuc);
});
关闭菜单
mui('.mui-off-canvas-left').offCanvas().close();
禁止侧滑
//禁止滑动主界面的时候出现侧滑菜单
document.getElementsByClassName('mui-inner-wrap')[0].addEventListener('drag', function(event) {
event.stopPropagation();
});
mui弹出菜单组件作为拟态框popover;拟态框只能放到侧滑菜单页面容器的外面,推荐放在body中,并设置居中样式
页面无法滚动
mui.init();
(function($){
$(".mui-scroll-wrapper").scroll({
bounce: false,//滚动条是否有弹力默认是true
indicators: true, //是否显示滚动条,默认是true
});
})(mui);
链接
mui('body').on('tap', 'a', function(){
// 获取onclick
let url = $(this).attr('href');
// 执行
location.href = url;
});