MUI设置卡头卡位的形式进行切换
这是mui的官方帮助文档,一切问题都能在这里找到http://dev.dcloud.net.cn/mui/ui/解决方案。
下面是MUI官方对卡头卡尾的一些描述:
在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:{}//额外扩展参数
}]
});
参数说明:styles表示窗口属性,参考5+规范中的WebviewStyle;特别注意,height和width两个属性,即使不设置,也默认按100%计算;因此若设置了top值为非"0px"的情况,建议同时设置bottom值,否则5+ runtime根据高度100%计算,可能会造成页面真实底部位置超出屏幕范围的情况;left、right同理。
示例:Hello mui的首页其实就是index.html加list.html合并而成的,如下:
![](http://dev.dcloud.net.cn/mui/assets/img/hello-mui-index.png)
![](http://dev.dcloud.net.cn/mui/assets/img/hello-mui-list.png)
![](http://dev.dcloud.net.cn/mui/assets/img/hello-mui-list.png)
index.html的作用就是显示固定导航,list.html显示具体列表内容,列表项的滚动是在list.html所在webview中使用原生滚动,既保证了滚动条不会穿透顶部导航,符合app的体验,也保证了列表流畅滚动,解决了区域滚动卡顿的问题。 list.html就是index.html的子页面,创建代码比较简单,如下:
mui.init({
subpages:[{
url:'list.html',
id:'list.html',
styles:{
top:'45px',//mui标题栏默认高度为45px;
bottom:'0px'//默认为0px,可不定义;
}
}]
});
在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:{}//额外扩展参数
}]
});
参数说明:styles表示窗口属性,参考5+规范中的WebviewStyle;特别注意,height和width两个属性,即使不设置,也默认按100%计算;因此若设置了top值为非"0px"的情况,建议同时设置bottom值,否则5+ runtime根据高度100%计算,可能会造成页面真实底部位置超出屏幕范围的情况;left、right同理。
示例:Hello mui的首页其实就是index.html加list.html合并而成的,如下:
![](http://dev.dcloud.net.cn/mui/assets/img/hello-mui-index.png)
![](http://dev.dcloud.net.cn/mui/assets/img/hello-mui-list.png)
![](http://dev.dcloud.net.cn/mui/assets/img/hello-mui-list.png)
index.html的作用就是显示固定导航,list.html显示具体列表内容,列表项的滚动是在list.html所在webview中使用原生滚动,既保证了滚动条不会穿透顶部导航,符合app的体验,也保证了列表流畅滚动,解决了区域滚动卡顿的问题。 list.html就是index.html的子页面,创建代码比较简单,如下:
mui.init({
subpages:[{
url:'list.html',
id:'list.html',
styles:{
top:'45px',//mui标题栏默认高度为45px;
bottom:'0px'//默认为0px,可不定义;
}
}]
});
那我们就按照官方的指示做出一个简单的卡头卡位的效果。首先,先新建一个项目。
![](https://images2017.cnblogs.com/blog/782554/201711/782554-20171106163659091-1552640422.png)
然后在项目中新建几个页面,建成之后的目录结构如图所示。
![](https://images2017.cnblogs.com/blog/782554/201711/782554-20171106163900575-1568184526.png)
关于这个页面的作用我介绍一下:
home.html:这里面只有卡头和卡尾的部分。
index.html、email.html、set.html、tel.html:分别对应着下边选项卡的首页、邮箱页、设置页、电话页。
程序的思路是这样的,在mui.init()执行的时候,就要先把这几个页面加载进来。
<script type="text/javascript" charset="utf-8"> mui.init({ subpages:[ { url:'index.html', id:'index.html', styles:{ top:'44px', bottom:'44px' } }, { url:'tel.html', id:'tel.html', styles:{ top:'44px', bottom:'44px' } }, { url:'email.html', id:'email.html', styles:{ top:'44px', bottom:'44px' } }, { url:'set.html', id:'set.html', styles:{ top:'44px', bottom:'44px' } }] }); </script>
mui.init()是一个方法,表明mui的基础控件加载完毕,mui.init({})里面可以执行一个代码块,这个代码块里面可以写一些mui初始化完毕后执行的代码,比如说,我们这里要执行的是把这几个页面给加载进来。语法呢,是json的语法,[]代表数组,{}代表对象,对象与对象之间用,隔开。在每个对象内部各个属性的含义如下:
url:要导入的页面的URL地址;
id:给要导入的页面赋予一个id,到时候可以根据plus.webView.getWebViewById()来获取到这个页面;
styles:里面可以设置一些样式。
把这几个页面导入之后,我们要实现点击下面对应的选项卡,然后中间呈现不同的页面。
<script type="text/javascript" charset="utf-8"> mui.plusReady(function() { changeView('index.html'); // 根据类名获取到的元素是一个数组,不是一个单个的元素,即使只有一个元素的话,那也要用[0]来访问 var tabs = document.getElementsByClassName("mui-tab-item"); for(var i = 0;i < tabs.length;i++){ tabs[i].addEventListener('tap',function(){ var id = this.id; changeView(id); }); } }); function changeView(id) { console.info('事件发生 '+id) plus.webview.getWebviewById(id).show(); var title = document.getElementById(id).querySelector(".mui-tab-label").innerHTML.toString(); console.info(title+"-----------"); // 根据类名获取到的元素是一个数组,不是一个单个的元素,即使只有一个元素的话,那也要用[0]来访问 document.getElementsByClassName("mui-title")[0].innerHTML = title; } </script>