mui底部導航欄幾種頁面跳轉方式

首先是簡單的進行頁面切換實現

以下代碼是利用mui的框架打出來底部標簽欄框架。

 

 

 方式一之頁面切換：利用a標簽中的href屬性直接進行跳轉

利用mui進行app開發，mui是一個基於h5+的前端框架，因此使用href屬性值直接進行跳轉還是可以的，不過在移動端點擊會出現白屏閃動的現象

代碼如下：

 

 

 注意：mui框架屏蔽了onclick和href事件。解決方法：綁定tab使用js跳轉 代碼如下:

mui('body').on('tap','a',function(){
        document.location.href=this.href;
    });

方式二之頁面切換：利用a標簽中的href屬性間接進行跳轉

這種方式 同樣不流暢,沒有充分利用mui的特性與優點,用戶體驗也不是很好.

 

 方式三之頁面切換：為a標簽id屬性賦值，進行頁面跳轉

這種方式是利用mui所封裝的函數進行跳轉，從前兩方式到第三種有明顯的差距，第三種是不會出現人和閃屏和等待延遲。也存在問題,就是 切換頁面之后,安卓的物理返回鍵,返回之后,頁面變了, 但是底部導航圖標文字沒有切換

代碼如下:

給a標簽附一個id  然后就mui自帶函數,打開新頁面

<a class="mui-tab-item" id="self" >
    <span class="mui-icon mui-icon-contact"></span>
    <span class="mui-tab-label">我的</span>
</a>

mui.plusReady(function(){
    document.getElementById('self').addEventListener('tap',function()    {
        mui.openWindow({
        url :"self.html",
        id  :"self"
        });
    });
});

方式4最好的方法: 采用將底部導航欄單獨寫入一個html內，再續寫四個子頁面，通過監聽的方法進行調用某個子頁面