版权声明：本文为 wintersmilesb101 -(我的独立博客– http://wintersmilesb101.online 欢迎访问)博主原创文章，未经博主容许不得转载。javascript
最近想入坑前端开发，也是为了开发 App 更快更接地气。在各类前端框架的纠结中我仍是决定先入坑 MUI ，开坑不易，欢迎交流。
OK，下面直接进入正题
咱们今天来试试制做网易云 App 的 UI，界面以下：
那么就开始工做吧，首先下载 Hbulider，而后打开新建移动 App 选择 MUI 模板(不下载也能够，能够手动建立 MUI 项目，这里就再也不赘述)。
而后打开 index.html,在 body 标签中添加以下代码
其中咱们的侧滑栏能够直接经过联想代码块快速实现触发语句
“`html
moffcanvas前端
#### 其实你不用打完就会出现能够选择的代码块，对应的代码块都有做用解释，这样能够很快的选择到须要的代码块。上述代码有几个注意的地方：
##### 1.个人 header 标签后的第一个 a 标签有下移 10px 的样式，这是由于咱们要实现沉浸式(透明)状态栏，实现方法以下：
```html
ios:
打开应用的manifest.json文件，切换到代码视图，在plus -> distribute -> apple 下添加UIReserveStatusbarOffset节点并设置值为false。
注意：
1. 真机运行不生效，需提交App云端打包后才生效；
2. 此功能仅在iOS7及以上系统有效。
android:
打开应用的manifest.json文件，切换到代码视图，在plus -> distribute -> google 下添加ImmersedStatusbar节点并设置值为true。
注意：
1. 真机运行不生效，需提交App云端打包后才生效；
2. 此功能仅在Android4.4及以上系统有效。
配置系统状态栏样式
iOS平台可支持对系统状态栏样式的配置，在应用manifest.json文件的plus->distribute->apple下添加UIStatusBarStyle进行控制，默认值为"UIStatusBarStyleDefault"。
UIStatusBarStyleDefault 默认样式，iOS6及如下系统状态栏为黑底白字，iOS7及以上系统用于定义系统状态栏上文字颜色为黑字(适用于浅色背景)
UIStatusBarStyleBlackOpaque 深色背景色样式，iOS6及如下系统状态栏为黑底白字，iOS7及以上系统用于定义系统状态栏上文字颜色为白色(适用于深色背景)
UIStatusBarStyleBlackTranslucent iOS6及如下系统在启动界面为灰底白字，iOS7及以上系统与UIStatusBarStyleBlackOpaque效果同样
设置系统状态栏背景颜色(iOS7及以上生效)
iOS平台可支持对系统状态栏背景颜色的配置，在应用manifest.json文件的plus->distribute->apple下添加StatusBarBackground进行控制：
值为字符串类型，格式为"#RRGGBB"格式，如红色为"#FF0000"；默认值为白色。
App云端打包设置系统状态栏背景颜色操做方式
双击应用的manifest.json文件，切换到“代码视图”，在apple节点下添加StatusBarBackground节点.
可是在设置了以后咱们的顶部栏会有与状态栏重叠的部分，因此这里就要向下移动必定距离
2.顶部 tab 标签的 style 样式(也就是代码中在 上一个问题的 a 标签以后的 div 标签)
这里是为了让咱们的样式与网易云音乐的顶部样式一致的作法，固然我这里尚未弄完，还存在边框的问题，可是本博客的重点不是这个，因此也就没太怎么弄了，其中添加的 ID 就是为了接下来的咱们的动态加载子页面中须要用到的。接下来就是重点：
在 MUI 中有一个建立子页面的方法
/*在mobile app开发过程当中，常常遇到卡头卡尾的页面，此时若使用局部滚动，在android手机上会出现滚动不流畅的问题； mui的解决思路是：将须要滚动的区域经过单独的webview实现，彻底使用原生滚动。具体作法则是：将目标页面分解为主页面和内容页面，主页面显示卡头卡尾区域，好比顶部导航、底部选项卡等；内容页面显示具体须要滚动的内容，而后在主页面中调用mui.init方法初始化内容页面。*/
mui.init({
subpages:[{
url:your-subpage-url,//子页面HTML地址，支持本地地址和网络地址
id:your-subpage-id,//子页面标志
styles:{
top:subpage-top-position,//子页面顶部位置
bottom:subpage-bottom-position,//子页面底部位置
width:subpage-width,//子页面宽度，默认为100%
height:subpage-height,//子页面高度，默认为100%
......
},
extras:{}//额外扩展参数
}]});
/*参数说明：styles表示窗口属性，参考5+规范中的WebviewStyle；特别注意，height和width两个属性,即便不设置，也默认按100%计算；所以若设置了top值为非"0px"的状况，建议同时设置bottom值，不然5+ runtime根据高度100%计算，可能会形成页面真实底部位置超出屏幕范围的状况；left、right同理。*/
能够看到咱们能够经过上述方法建立子页面实现分页，可是这只是一个页面，那么要怎么实现多页面的切换呢？这里就要引入 H5 webView相关的操做了，关于 H5 webview 的相关 API 能够看这里 H5 webview API，咱们这里用到的是 getWebviewById,他会返回一个 WebviewObject窗口对象 咱们就在这个对象上作文章。下面来书写 JS 代码：
mui.plusReady(function(){
console.log("当前页面URL："+plus.webview.currentWebview().getURL());
//给标签为 mine 的元素(也就是咱们的个人 tab )添加 tap 事件，这里因为 click 的延迟过高，故用 tap 事件。
document.getElementById("mine").addEventListener('tap',function(){
//获取到当前的 webview 根据标签也就是下面定义的子页面 id
var cur = plus.webview.getWebviewById("contentHtml");
//判断是不是此页面
if(cur.getURL()!="htmlFile/mine.html")
{
//不是就要切换页面为当前 tab 是指向的页面
console.log("显示个人");
cur.loadURL("htmlFile/mine.html")
}
});
document.getElementById("discory").addEventListener('tap',function(){
var cur = plus.webview.getWebviewById("contentHtml");
if(cur.getURL()!="htmlFile/discory.html")
{
console.log("显示个人");
cur.loadURL("htmlFile/discory.html")
}
});
document.getElementById("dynamic").addEventListener('tap',function(){
var cur = plus.webview.getWebviewById("contentHtml");
if(cur.getURL()!="htmlFile/dynamic.html")
{
console.log("显示个人");
cur.loadURL("htmlFile/dynamic.html")
}
});
});
//MUI 的初始化，添加子页面(默认页面是 “个人” 界面，这里的子页面 id 就要被用于之后 tab 点击事件中获取 webview 的 id，特别)，
mui.init({
subpages:[
{
url:'htmlFile/mine.html',
id:'contentHtml',
styles:{
top:'55px'
}
}
]
});
对应的要注意的地方以及解释上面代码里已经说的很清楚了，至于其余的 3 个页面，我是另外写好的，大家也要写出页面，url 中填写大家要跳转的页面的地址就行了(网络地址或者本地地址)，这里我就不说其余页面怎么创建了
运行以下，仔细看就能发现一个问题，咱们列表的最下面一项没有显示出来，也就是说页面没有彻底显示出来，
解决方法：在建立子页面的时候咱们设置了top 的话就要也设置 bottom 否者会致使页面显示不彻底！(仔细看看前面官方文档就会发现，这就是不认真看文档的锅)，下面修改 jS 代码：
mui.init({
subpages:[
{
url:'htmlFile/mine.html',
id:'contentHtml',
styles:{
top:'55px',
bottom:'0px'
}
}
]
});
而后保存，最好从新编译一次(这种更新不知道为何个人若是不从新编译就不会出现正确的效果)，中止调试，再开始调试，结果以下( 多 tab 页面的实时切换就完成了)：
已知问题，侧边栏会被子页面覆盖，目前想法是经过 zindex 调整，可是试过无用。
400
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
