页面初始化
在app开发中,若要使用HTML5+扩展api,必须等plusready事件发生后才能正常使用,mui将该事件封装成了mui.plusReady()方法,涉及到HTML5+的api,建议都写在mui.plusReady方法中。
创建子页面
通过双webview模式解决,此种情况适用于需要上下拉刷新的列表页面。将需要滚动的区域通过单独的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:{}//额外扩展参数
}]
});
例子
现在我实现底部tab实现页面的跳转 ,有四个tab,index.html的作用就是显示固定导航和固定的底部,源码如下:
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title"><strong > 微信</strong></h1>
</header>
<nav class="mui-bar mui-bar-tab">
<a class="mui-tab-item mui-active" href="main.html">
<span class="mui-icon mui-icon-weixin"></span>
<span class="mui-tab-label">微信</span>
</a>
<a class="mui-tab-item" href="contact.html">
<span class="mui-icon mui-icon-contact"></span>
<span class="mui-tab-label">通讯录</span>
</a>
<a class="mui-tab-item" href="find.html">
<span class="mui-icon mui-icon-paperplane"></span>
<span class="mui-tab-label">发现</span>
</a>
<a class="mui-tab-item" href="person.html">
<span class="mui-icon mui-icon-person"></span>
<span class="mui-tab-label">我的</span>
</a>
</nav>
main.html 只有list ,源码如下:
<div class="mui-content">
<ul class="mui-table-view">
<li class="mui-table-view-cell mui-media">
<a href="javascript:;">
<img class="mui-media-object mui-pull-left" src="http://placehold.it/40x30">
<div class="mui-media-body">
幸福
<p class="mui-ellipsis">能和心爱的人一起睡觉,是件幸福的事情;可是,打呼噜怎么办?</p>
</div>
</a>
</li>
</ul>
</div>
其他的HTML页面照本宣科,就不显示源码了,接下来就是js如何实现四个页面的跳转:
<script type="text/javascript">
var subPages = ['main', 'contact', 'find', 'person']; // 将四个页面存放在数组里面
// alert(subPages);
var subPageStyle = { // 这里是设置子页面显示的位置
top: '44px',
bottom: '50px'
};
mui.plusReady(function(){
var self= plus.webview.currentWebview(); // 获取当前窗口的指针
for (var i =0;i<subPages.length;i++) {
var sub = plus.webview.create(subPages[i]+ ".html",subPages[i],subPageStyle); //创建底部栏四个页面
sub.hide(); //将所有的子页面隐藏起来
self.append(sub); // 把子页面append 进父页面
}
plus.webview.show(subPages[0]); //显示第一个子页面
});
mui(".mui-bar-tab").on("tap","a",function(e){ // 获取点击的底部栏
var targetPage =this.getAttribute("href");
plus.webview.show(targetPage,"fade-in",100); //显示那个页面
});
</script>