手机App 手机|

会挽雕弓如满月，西北望，射天狼。这篇文章主要讲述手机App相关的知识，希望能为你提供帮助。
首先让我们设置一下主页的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文件。

【手机App】< 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>