hello mui示例工程中setting.html页面，用到了mui提供的一个单页插件mui.view。
可能是该页面的内容较多，许多开发者对此插件的使用不是很明了。这里通过一个最简示例，来详细说明该插件的使用。
依赖
- mui.js
- mui.view.js
- mui.css
以上文件，都可以在HBuilder中新建hellomui示例工程中获取。
html结构
主体部分
<div class="mui-view">
<div class="mui-navbar"></div>
<div class="mui-pages"></div>
</div>
.mui-view->.mui-navbar用于加载单页的header部分
.mui-view->.mui-mui-pages用于加载单页的content部分
单页结构
<div class="mui-page">
<!--header部分-->
<div class="mui-navbar-inner mui-bar mui-bar-nav">
<a href="javascript:;" class="mui-icon mui-icon-back mui-action-back"></a>
</div>
<!--内容区域-->
<div class="mui-page-content">内容区域</div>
</div>
每个单页的内容区域，都在.mui-page容器中。
header部分，必须按照.mui-page->.mui-navbar-inner的结构构建。内容区域，推荐使用.mui-page.content。
css部分
.mui-page.mui-transitioning {
-webkit-transition: -webkit-transform 300ms ease;
transition: transform 300ms ease;
}
.mui-page-left {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.mui-ios .mui-page-left {
-webkit-transform: translate3d(-20%, 0, 0);
transform: translate3d(-20%, 0, 0);
}
.mui-navbar .mui-btn-nav {
-webkit-transition: none;
transition: none;
-webkit-transition-duration: .0s;
transition-duration: .0s;
}
.mui-navbar .mui-bar .mui-title {
display: inline-block;
width: auto;
}
.mui-page-shadow {
position: absolute;
right: 100%;
top: 0;
width: 16px;
height: 100%;
z-index: -1;
content: '';
}
.mui-page-shadow {
background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, .01) 50%, rgba(0, 0, 0, .2) 100%);
background: linear-gradient(to right, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, .01) 50%, rgba(0, 0, 0, .2) 100%);
}
.mui-navbar-inner.mui-transitioning,
.mui-navbar-inner .mui-transitioning {
-webkit-transition: opacity 300ms ease, -webkit-transform 300ms ease;
transition: opacity 300ms ease, transform 300ms ease;
}
.mui-page {
display: none;
}
.mui-pages .mui-page {
display: block;
}
上述css，均为实现单页切换所必须的。
与transition相关的css，用于实现单页的切换动画。可以根据实际需求，适当调整。
javascript部分
初始化插件
var viewApi = mui('.mui-view').view({
defaultPage: '#default_page' //默认页面的选择器
});
切换页面
两种方式可以实现页面切换
锚点方式
<!--锚点部分-->
<a href="#pageid"></a>
<!--单页部分-->
<div class="mui-page" id="pageid"></div>
js控制
如果希望通过js来控制，可以调用view组件的go()方法来实现。
var elem = document.querySelector('a');
elem.addEventListener('tap', function(){
viewApi.go('#pageid');
});
切换事件
hello mui中setting.html中对此已经做了明确的说明。
监听页面切换事件方案，通过view元素监听所有页面切换事件
目前提供pageBeforeShow|pageShow|pageBeforeBack|pageBack四种事件(before事件为动画开始前触发)
第一个参数为事件名称，第二个参数为事件回调，其中e.detail.page为当前页面的html对象
后退操作
单页面的切换，后退的处理非常关键。view组件提供了两个方法，来处理back。
- viewApi.canBack() 用于判定是否可以后退
- viewApi.back() 后退至上一次访问的页面
通常，会按照setting.html中那样，重写原来的back。
var oldBack = mui.back;
mui.back = function() {
if(viewApi.canBack()) {
viewApi.back();
} else {
oldBack();
}
};
结尾
附上一个简单的demo，解压后直接在浏览器中即可预览效果。
