关于mui header与底部tab重复加载的问题(这个问题很难描述)?
使用了mui的webview,在真机运行的时候页面就成这样了
应该是这样的:
html如下:
<nav class="mui-bar mui-bar-tab">
<a href="index.html" class="mui-tab-item mui-active" id="defaultTab">
<span class="mui-icon mui-icon-home"></span>
<span class="mui-tab-label">首页</span>
</a>
<a href="login.html" class="mui-tab-item">
<span class="mui-icon mui-icon-phone"></span>
<span class="mui-tab-label">消息</span>
</a>
<a href="main.html" class="mui-tab-item">
<span class="mui-icon mui-icon-email"></span>
<span class="mui-tab-label">我的</span>
</a>
<!--<a href="reg.html" class="mui-tab-item">
<span class="mui-icon mui-icon-gear"></span>
<span class="mui-tab-label">设置</span>
</a>-->
</nav>
js如下:
var Index = 0;
var subpages = ['index.html','login.html','main.html','reg.html'];
mui.plusReady(function() {
var self = plus.webview.currentWebview();
for(var i=0;i<subpages.length;i++){
var sub = plus.webview.create(subpages[i],subpages[i],{top:'45px',bottom:'50px'});
if(i != Index){
sub.hide();
}
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;
}
//更换标题
title.innerHTML = this.querySelector('.mui-tab-label').innerHTML;
//显示目标选项卡
plus.webview.show(targetTab);
//隐藏当前选项卡
plus.webview.hide(activeTab);
//更改当前活跃的选项卡
activeTab = targetTab;
})
});
第一次使用mui感觉问题还多的!谢谢!
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
在subpages 和页面上的a标签不能有本页面的路径:index.html这个要去掉。