鍍金池/ 問(wèn)答/HTML5  HTML/ 關(guān)于mui header與底部tab重復(fù)加載的問(wèn)題(這個(gè)問(wèn)題很難描述)?

關(guān)于mui header與底部tab重復(fù)加載的問(wèn)題(這個(gè)問(wèn)題很難描述)?

使用了mui的webview,在真機(jī)運(yùn)行的時(shí)候頁(yè)面就成這樣了
圖片描述

應(yīng)該是這樣的:圖片描述

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">首頁(yè)</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">設(shè)置</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);
            }
               //當(dāng)前激活選項(xiàng)
            var activeTab = subpages[Index],title=document.querySelector(".mui-title");
            //選項(xiàng)卡點(diǎn)擊事件
            mui('.mui-bar-tab').on('tap', 'a', function(e) {
            //獲取目標(biāo)子頁(yè)的id
                var targetTab = this.getAttribute('href');
                if (targetTab == activeTab) {
                    return;
                }
                //更換標(biāo)題
                title.innerHTML = this.querySelector('.mui-tab-label').innerHTML;
                //顯示目標(biāo)選項(xiàng)卡
                plus.webview.show(targetTab);
                //隱藏當(dāng)前選項(xiàng)卡
                plus.webview.hide(activeTab);
                //更改當(dāng)前活躍的選項(xiàng)卡
                activeTab = targetTab;
            })
        });

第一次使用mui感覺(jué)問(wèn)題還多的!謝謝!

回答
編輯回答
旖襯

在subpages 和頁(yè)面上的a標(biāo)簽不能有本頁(yè)面的路徑:index.html這個(gè)要去掉。

2018年8月29日 08:31