会挽雕弓如满月,西北望,射天狼。这篇文章主要讲述手机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>
推荐阅读
- 转(Android Bander设计与实现 - 设计篇)
- 转(轻松理解 Android Binder,只需要读这一篇)
- 转 理解Android系统Binder机制
- 为什么Android要采用Binder作为IPC机制()
- spring mvc 关键接口 HandlerMapping HandlerAdapter
- 用Anko和Kotlin实现Android上的对话框和警告提示(KAD 24)
- Android开发笔记——调用子Activity
- Android 录制视频
- 笔记与Android酱的第一周