MUI-tab兩種實現方式

時間 2019-12-05

標籤 mui tab 兩種實現方式简体版

原文原文鏈接

底部選項卡tab有兩種實現方式，一種是用js另外一種是原生的javascript

1、js實現方式：首先先建1個首頁和幾個子頁，最後合併而成css

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <!--ctrl+d刪除空白行-->
    <link href="css/mui.min.css" rel="stylesheet" />
</head>

<body>
    <!--.mui-bar-nav~.mui-content這兩個class之間的~什麼意思？匹配 .mui-bar-nav 以後全部的 .mui-content（即同級的其餘類或元素）。-->
    <header class="mui-bar mui-bar-nav">
        <h1 class="mui-title">首頁</h1>
    </header>
    <div>content</div>
    <nav class="mui-bar mui-bar-tab">
        <a class="mui-tab-item mui-active" href="html/home.html">
				<span class="mui-icon mui-icon-home"></span>
				<span class="mui-tab-label">首頁</span>
			</a>
        <a class="mui-tab-item" href="html/message.html">
				<span class="mui-icon mui-icon-chatboxes"></span>
				<span class="mui-tab-label">消息</span>
			</a>
        <a class="mui-tab-item" href="html/setting.html">
				<span class="mui-icon mui-icon-gear"></span>
				<span class="mui-tab-label">設置</span>
			</a>
    </nav>
    <script src="js/mui.min.js"></script>
    <script type="text/javascript" charset="utf-8">
    //設置默認打開首頁顯示的子葉序號
    var Index = 0;
    //把子頁的路徑寫在數組中
    var subpages = ["html/home.html", "html/message.html", "html/setting.html"];
    mui.plusReady(function() {
        //獲取當前頁面所屬的Webview窗口對象
        var self = plus.webview.currentWebview();
        for (var i = 0; i < subpages.length; i++) {
            //建立webview子頁
            (function(i) {
                setTimeout(function() {
                    var wvs = plus.webview.all();
                    console.log(wvs.length);
                    var sub = plus.webview.create(
                        subpages[i], //子頁url
                        subpages[i], //子頁id
                        {
                            top: "45px",
                            bottom: "50px"
                        }
                    );
                    //如不是咱們設置的默認子頁則隱藏，不然添加到窗口中
                    if (i != Index) {
                        sub.hide();
                    }
                    //將webview對象填充到窗口,同一個self屢次追加子頁面，默認只顯示最後建立追加的
                    self.append(sub);
                }, 3000)
            })(i)




        }
        //var wvs=plus.webview.all();
        //console.log(wvs.length);

    })
    //當前激活選項
    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;
    });
    </script>
</body>

</html>

2、另外一種方式是原生方式，首先新建移動app,選擇底部選項卡模板，會生成原生控件的底部選項卡模板html

原生的模板咱們常常須要修改爲本身須要的java

若是改爲3個tab切換，修改步驟web

一、manifest.json配置文件plus-launchwebview-subNViews中刪除不須要的選項卡（文字與圖標都是單獨定位的，不是一組組的）json

二、js裏面的util.js 把i<8 改爲 i<6數組

for(var i = 0; i < 8; i++) {
           if(i !== currIndex && i !== currIndex + 1) {
               util.updateSubNView(i, util.options.NORMAL_COLOR);
           }
       }app

三、根據判斷view控件點擊位置判斷切換的tab修改爲下面的，若是不須要下面的氣泡，關於氣泡的代碼都刪除
nview.addEventListener('click', function(e) {
                       var clientX = e.clientX;
                       if(clientX > 0 && clientX <= parseInt(pageW * 0.33)) {
                           currIndex = 0;
                       } else if(clientX > parseInt(pageW * 0.33) && clientX <= parseInt(pageW * 0.67)) {
                           currIndex = 1;
                       } else if(clientX > parseInt(pageW * 0.67)) {
                           currIndex = 2;
                       }
                       // 匹配對應tab窗口
                       if(currIndex > 0) {
                           targetPage = plus.webview.getWebviewById(subpages[currIndex - 1]);
                       } else {
                           targetPage = plus.webview.currentWebview();
                       }ide

                       if(targetPage == activePage) {
                           return;
                       }函數

                           //底部選項卡切換
                           util.toggleNview(currIndex);
                           // 子頁面切換
                           util.changeSubpage(targetPage, activePage, aniShow);
                           //更新當前活躍的頁面
                           activePage = targetPage;

                   });

Hbuilder生成的模板在列表跳轉時在列表頁面跳轉時遇到下面2個錯誤
一、 Uncaught ReferenceError: open_detail is not defined at index.html:2
解決方法把js最外層的自執行函數刪除
(function() {
})();

二、Uncaught Error: webview[moive-detail] does not exist at js/mui.min.js:6 //預加載頁面放到mui.plusReady(function() {}裏面，plusReady上面var detailPage = null; detailPage = mui.preload({ id: "moive-detail", url: "./html/moive_detail.html" });

相關標籤/搜索

每日一句

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