mui主頁下部tab欄切換

時間 2019-11-09

標籤 mui 主頁下部 tab 切換简体版

原文原文鏈接

爲了避免像官方演示的那樣把全部tab頁都塞在一個html裏面形成卡頓，因此，將首頁和各個tab頁分開。html

頁面html結構以下：ios

<body>
　　<header class="mui-bar mui-bar-nav" style="color:;">
　　　　<a href="#offCanvasSide" class="mui-icon mui-action-menu mui-icon-bars mui-pull-left mui-icon-contact"></a>
　　　　<h1 id="title" class="mui-title" style="color:white;background-color:;">移動平臺</h1>
　　</header>
　　<nav class="mui-bar mui-bar-tab">
　　　　<a id="defaultTab" class="mui-tab-item mui-active" href="homepage.html">
　　　　　　<span class="mui-icon mui-icon-home"></span>
       　　<span class="mui-tab-label">流程</span>
   　　</a>
   　　<a id="dotTab" class="mui-tab-item" href="gis.html">
   　　　　<span class="mui-icon mui-icon-map"></span>
      　　<span class="mui-tab-label">網點</span>
   　　</a>
   　　<a id="caseTab" class="mui-tab-item" href="case.html">
      　　<span class="mui-icon mui-icon-email"></span>
      　　<span class="mui-tab-label">案件</span>
   　　</a>
　　</nav>
</body>

JavaScript部分：web

var menu = null,main = null;
var showMenu = false;
//mui初始化
mui.init();
var subpages = ['homepage.html', 'gis.html', 'case.html'];
var subpage_style = {
　　top: '45px',
　　bottom: '51px',
　　hardwareAccelerated: true//開啓硬件加速
};
var aniShow = {};
mui.plusReady(function() {
　　var self = plus.webview.currentWebview();
　　for(var i = 0; i < 3; i++) {
　　　　var temp = {};
　　　　var sub = plus.webview.create(subpages[i], subpages[i], subpage_style);
　　　　if(i > 0) {
       　　sub.hide();
　　　　} else {
       　　temp[subpages[i]] = "true";
　　　　　　mui.extend(aniShow, temp);
       }
　　　　self.append(sub);
　　}
　　//當前激活選項
　　var activeTab = subpages[0];
　　var title = document.getElementById("title");
　　//選項卡點擊事件
　　mui('.mui-bar-tab').on('tap', 'a', function(e) {
　　　　var targetTab = this.getAttribute('href');
　　　　if(targetTab == activeTab) {
　　　　　　return;
　　　　}
       //更換標題
　　　　title.innerHTML = this.querySelector('.mui-tab-label').innerHTML;
　　　　//顯示目標選項卡
　　　　//若爲iOS平臺或非首次顯示，則直接顯示
　　　　if(mui.os.ios || aniShow[targetTab]) {
       　 plus.webview.show(targetTab);
　　　　} else {
　　　　//不然，使用fade-in動畫，且保存變量
　　　　　　var temp = {};
          temp[targetTab] = "true";
　　　　　　mui.extend(aniShow, temp);
　　　　　　plus.webview.show(targetTab, "fade-in", 300);
       }
　　　　//隱藏當前;
       plus.webview.hide(activeTab);
       //更改當前活躍的選項卡
　　　　activeTab = targetTab;
    });
    //自定義事件，模擬點擊「首頁選項卡」
    document.addEventListener('gohome', function() {
       var defaultTab = document.getElementById("defaultTab");
       //模擬首頁點擊
       mui.trigger(defaultTab, 'tap');
       //切換選項卡高亮
       var current = document.querySelector(".mui-bar-tab>.mui-tab-item.mui-active");
       if(defaultTab !== current) {
       　  current.classList.remove('mui-active');
           defaultTab.classList.add('mui-active');
       }
   });
});

我的測試是可行的，歡迎指正啊。app

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。