[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,
});