mui 顶部选项卡的两种切换方式
Posted lijieshi
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了mui 顶部选项卡的两种切换方式相关的知识，希望对你有一定的参考价值。
mui 顶部选项卡的两种切换方式
第一种main页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="css/mui.min.css">
</head>
<body>
<div class="mui-content">
<div id="slider" class="mui-slider mui-fullscreen">
<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
<div class="mui-scroll">
<a class="mui-control-item mui-active" href="direction.html" data-wid="tab-top-subpage-1.html">
推荐
</a>
<a class="mui-control-item" href="day_rank.html" data-wid="tab-top-subpage-2.html">
热点
</a>
</div>
</div>
</div>
</div>
<script src="js/mui.min.js"></script>
<script src="js/webviewGroup.js" type="text/javascript" charset="utf-8"></script>
<script>
mui.init();
mui.plusReady(function() {
var group = new webviewGroup("direction.html", {
items: [{
id: "direction.html", //这是子页1的路径
url: "direction.html",
extras: {}
}, {
id: "day_rank.html", //这是子页2的路径
url: "day_rank.html",
extras: {}
}],
onChange: function(obj) {
var c = document.querySelector(".mui-control-item.mui-active");
if(c) {
c.classList.remove("mui-active");
}
document.querySelector(".mui-scroll .mui-control-item:nth-child(" + (parseInt(obj.index) + 1) + ")").classList.add("mui-active");
}
});
mui(".mui-scroll").on("tap", ".mui-control-item", function(e) {
var wid = this.getAttribute("href");
group.switchTab(wid);
});
});
mui.back = function() {
var _self = plus.webview.currentWebview();
_self.close("auto");
}
</script>
</body>
</html>index 页面
<script src="js/mui.min.js"></script>
<script type="text/javascript">
mui.init({
subpages:[{ //下边是初始化，然后这个页面显示我们将插入的页面
url:"main.html",
id:"main.html",
styles:{
top:"50px",
bottom:"0px"
}
}]
});
</script>下面是第二种方式 通过JS来实现页面内嵌（ 缺陷， 每次点击都会更行）
main页面
<!doctype html>
<html lang="en" style='height:100%'>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="css/mui.css"/>
</head>
<body>
<div class="mui-content">
<div class="mui-segmented-control"style="width:90%;text-align: center;">
<a class="mui-control-item mui-btn-warning mui-active mui-btn-outlined" href="day_rank.html">选项卡1</a>
<a class="mui-control-item mui-btn-warning mui-btn-outlined" href="direction.html">选项卡2</a>
</div>
</div>
</div>
</body>
<script src="js/mui.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
mui.init();
//设置默认打开首页显示的子页序号；
var Index=0;
//把子页的路径写在数组里面
var subpages = ['day_rank.html','direction.html'];
//所有的plus-*方法写在mui.plusReady中或者后面。
mui.plusReady(function() {
//获取当前页面所属的Webview窗口对象
var self = plus.webview.currentWebview();
for (var i = 0; i < subpages.length; i++) {
//创建webview子页
var sub = plus.webview.create(
subpages[i], //子页url
subpages[i], //子页id
{
top: '500px',//设置距离顶部的距离
bottom: '100px'//设置距离底部的距离
}
);
//如不是我们设置的默认的子页则隐藏，否则添加到窗口中
if (i != Index) {
sub.hide();
}
//将webview对象填充到窗口
self.append(sub);
}
});
//当前激活选项
var activeTab = subpages[Index],title=document.querySelector(".mui-title");
//选项卡点击事件
mui('.mui-segmented-control').on('tap', 'a', function(e) {
//获取目标子页的id
var targetTab = this.getAttribute('href');
if (targetTab == activeTab) {
return;
}
//更换标题
// title.innerHTML = this.querySelector('.mui-tab-label').innerHTML;
//显示目标选项卡
//获取当前窗口对象
var self=plus.webview.currentWebview();
//如果是第一个页面那么选择 第一个页面的样式 第一个页面底部有选项卡
if(targetTab==subpages[0]){
//主页面 index_style
var sub=plus.webview.create('day_rank.html','day_rank.html',{top:'500px',bottom:'0px'});
}else{
//主页面 其余页面的样式 subpage_style
var sub=plus.webview.create('direction.html','direction.html',{top:'500px'});
}
//把子页面添加到当前窗口对象里
self.append(sub);
//关闭当前窗口里面已经展示的页面
plus.webview.hide(activeTab);
//要打开的页面赋值给当前页面留着下次使用
activeTab=targetTab;
});
document.getElementById('newslist').addEventListener("tap",function(){
mui.openWindow('direction.html','direction.html',{
styles:{
top:'0px',
bottom:"50px"
},
})
})
</script>
</html>以上是关于mui 顶部选项卡的两种切换方式的主要内容，如果未能解决你的问题，请参考以下文章