[MUI框架]-滑动侧边栏-div同页结构

MUI 官网：http://dev.dcloud.net.cn/mui/
使用前准备，先下载HBuilder：http://www.dcloud.io/，然后新建移动APP里面的mui项目，则会自动生成所需的css文件和js文件。

第一步：引入必要的文件

---

引入css以及js：

<link href="css/mui.min.css" rel="stylesheet"/>
<script src="js/mui.min.js">script>

第二步：写出必要的结构

---

    
    <div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-draggable">
      
      <aside id="offCanvasSide" class="mui-off-canvas-right">
        <div class="mui-scroll-wrapper">
          <div class="mui-scroll">
            
            <p style="padding: 5px 20px;margin-bottom: 5px;">侧边menu菜单p>
            <p style="padding: 5px 20px;margin-bottom: 5px;">
                <button id="offCanvasHide" type="button" class="mui-btn mui-btn-danger mui-btn-block" style="padding: 5px 20px;">关闭侧滑菜单button>
            p>
          div>
        div>
      aside>

      
      <div class="mui-inner-wrap">
        
        <header class="mui-bar mui-bar-nav">
          
          <a href="#offCanvasSide" class="mui-icon mui-action-menu mui-icon-bars mui-pull-right">a>
          <h1 class="mui-title">标题h1>
        header>

        <div class="mui-content mui-scroll-wrapper">
          <div class="mui-scroll">
            
            <p>这是可拖动式左滑导航示例，主页面和菜单在一个HTML文件中， 优点是支持拖动手势（跟手），缺点是不支持菜单内容在多页面的复用； 当前页面为主界面，你可以在主界面放置任何内容；p>
            <p style="padding: 5px 20px;margin-bottom: 5px;">
                <button id="offCanvasShow" type="button" class="mui-btn mui-btn-primary mui-btn-block" style="padding: 5px;">显示侧滑菜单button>
            p>
          div>
        div>
        
        <div class="mui-off-canvas-backdrop">div>
      div>
    div>

第三步：写上必要的启动js

---

由于我们自定义了显示和隐藏侧边栏的2个button按钮，所以要给这2个按钮绑定点击事件，如果你没有自己定义按钮，则下边的js就可以不用写了

    <script>
        document.getElementById('offCanvasShow').addEventListener('tap', function() {
            mui('#offCanvasWrapper').offCanvas('show');
        });
        document.getElementById('offCanvasHide').addEventListener('tap', function() {
            mui('#offCanvasWrapper').offCanvas('close');
        });
    script>

如果你不需要手指在屏幕上滑动就出现侧边栏，则可以关掉swipe开关：

mui.init({
    swipe: false,
});