关于mui header与底部tab重复加载的问题(这个问题很难描述)?

发布于 2022-09-07 21:39:45 字数 2591 浏览 22 评论 0

使用了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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

躲猫猫 2022-09-14 21:39:45

在subpages 和页面上的a标签不能有本页面的路径:index.html这个要去掉。

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文