```<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/mui.min.css"/>
</head>
<body>
<nav class="mui-bar mui-bar-tab">
<a href="html/home.html" class="mui-tab-item mui-active" id="defaultTab">
<span class="mui-icon iconfont icon-shouye"></span>
<span class="mui-tab-label">首页</span>
</a>
<a href="html/fabu.html" class="mui-tab-item" id="fabu">
<span class="mui-icon iconfont icon-money"></span>
<span class="mui-tab-label">发布</span>
</a>
<a href="html/xinxi.html" class="mui-tab-item" id="xinxi">
<span class="mui-icon iconfont icon-xiazai16"></span>
<span class="mui-tab-label">信 息</span>
</a>
<a href="html/chengjiao.html" class="mui-tab-item" id="chengjiao">
<span class="mui-icon mui-icon-locked"></span>
<span class="mui-tab-label">成 交</span>
</a>
<a href="html/user.html" class="mui-tab-item" id="wode">
<span class="mui-icon iconfont icon-wode"></span>
<span class="mui-tab-label">我 的</span>
</a>
</nav>
<script src="js/mui.min.js"></script>
<script src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
// 初始化mui.init()写在这里
mui.init();
//设置默认打开首页显示的子页序号；
var Index = 0;
var subpages = ['html/home.html', 'html/fabu.html', 'html/xinxi.html','html/chengjiao.html','html/user.html'];
//把子页的路径写在数组里面
//所有的plus-*方法写在mui.plusReady中或者后面。
mui.plusReady(function() {
//获取当前页面所属的Webview窗口对象
var self = plus.webview.currentWebview();
for(var i = 0; i < 5; i++) {
//创建webview子页
var sub = plus.webview.create(
subpages[i], //子页url
subpages[i], //子页id
{
top: '0', //设置距离顶部的距离
bottom: '50px' //设置距离底部的距离
}
);
//如不是我们设置的默认的子页则隐藏，否则添加到窗口中
if(i != Index) {
sub.hide();
}
//将webview对象填充到窗口
self.append(sub);
}
});
//当前激活选项
var activeTab = subpages[Index],
title = document.querySelector(".mui-title");
//选项卡点击事件
mui('.mui-bar-tab').on('tap', 'a', function(e) {
//获取目标子页的id
var targetTab = this.getAttribute('href');
if(targetTab == activeTab) {
return;
}
//更换标题
// h1.innerHTML = this.querySelector('.mui-tab-label').innerHTML;
//显示目标选项卡
plus.webview.show(targetTab);
//隐藏当前选项卡
plus.webview.hide(activeTab);
//更改当前活跃的选项卡
activeTab = targetTab;
});
//自定义事件，模拟点击“首页选项卡”
//申请页面
window.addEventListener('defaultTab', function() {
location.reload();
var apply= document.getElementById("defaultTab");
//模拟首页点击
mui.trigger(apply, 'tap');
//切换选项卡高亮
var current = document.querySelector(".mui-bar-tab>.mui-tab-item.mui-active");
if(apply!== current) {
current.classList.remove('mui-active');
apply.classList.add('mui-active');
}
});
</script>
</body>
</html>
有大神知道怎么解决吗？ 不胜感激
侠客的刀
- 发布：2019-04-25 15:25
- 更新：2019-05-13 16:05
- 阅读：1321
mui 导航栏快速点击切换会出现页面与导航不一致的情况
分类：MUI
1 个回复
侠客的刀 (作者) - 學而時習之不亦說乎
//选项卡点击事件
mui('.mui-bar-tab').on('tap', 'a', function(e) {
$(this).css('color','#0d50a3').siblings().css('color','#878a8e');
var targetTab = this.getAttribute('href');
if (targetTab == activeTab) {
return;
}
呃呃 试了下这样就不会出现快速切换不一致的问题了