手机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>
 







































































    推荐阅读