MUI 使用爬坑之路之 tab 多页面操作

版权声明：本文为 wintersmilesb101 -（个人独立博客– http://wintersmilesb101.online 欢迎访问）博主原创文章，未经博主允许不得转载。

最近想入坑前端开发，也是为了开发 App 更快更接地气。在各种前端框架的纠结中我还是决定先入坑 MUI ，开坑不易，欢迎交流。

首先贴上几个链接

MUI 官网

H5 的相关 API

Hbulider 官网

OK，下面直接进入正题

我们今天来试试制作网易云 App 的 UI，界面如下：

那么就开始工作吧，首先下载 Hbulider，然后打开新建移动 App 选择 MUI 模板（不下载也可以，可以手动创建 MUI 项目，这里就不再赘述）。

然后打开 index.html,在 body 标签中添加如下代码

<!-- 主界面不动、菜单移动 -->
    <!-- 侧滑导航根容器 -->
    <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" style="margin-top: 10px;background-color: #FF0000;">
          <