首先让我们设置一下主页的css样式，。
<body>
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">杰瑞教育1701</h1>
</header>
<div class="mui-content">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
1.图文列表跳转详情页并传参
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
2.底部选项卡切换(系统)
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
3.底部选项卡切换自定义
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
4.调用摄像头拍摄功能
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
5.图片轮播
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
6.下拉刷新&上拉加载
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
7.UI组件
</a>
</li>
</ul>
</div>
</body>
页面初始化
在app开发中，若要使用HTML5+扩展api，必须等plusready事件发生后才能正常使用，mui将该事件封装成了mui.plusReady()方法，涉及到HTML5+的api，建议都写在mui.plusReady方法中。如下为打印当前页面URL的示例：
mui.plusReady(function(){
console.log("当前页面URL："+plus.webview.currentWebview().getURL());
});mui.init() mui插件初始化
mui.ready() 当DOM准备就绪时，指定一个函数来执行。
代码块激活字符:
minit
创建子页面
在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:{}//额外扩展参数 }]});这是主页的html文件。
<script type="text/javascript" charset="utf-8">
mui.init();
mui.plusReady(function(){
var arr=document.getElementsByTagName("a");
//存放列表点击页面链接
var pages=["newsindex.html","qiehuanxuanxiangka.html","qiehuantab2.html","camera.html","imglunbo.html","pullrefresh_main.html"];
for(var i=0;i<arr.length;i++){
!function(i){
arr[i].addEventListener("tap",function(){
mui.openWindow({
url:pages[i],
id:pages[i],
styles:{
top:"0px",//新页面顶部位置
bottom:"0px",//新页面顶部位置
}
})
})
}(i)
}
})
</script>