【示例】mui.view插件的使用

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。

1. viewApi.canBack() 用于判定是否可以后退
2. viewApi.back() 后退至上一次访问的页面
   通常，会按照setting.html中那样，重写原来的back。

   var oldBack = mui.back;  
   mui.back = function() {  
   if(viewApi.canBack()) {  
       viewApi.back();  
   } else {  
       oldBack();  
   }  
   };  

结尾

附上一个简单的demo，解压后直接在浏览器中即可预览效果。