mui底部選項卡切換頁面

時間 2019-11-24

標籤 mui 底部選項切換頁面简体版

原文原文鏈接

參照官網窗口管理：http://dev.dcloud.net.cn/mui/window/

mui.init({
    subpages:[{
      url:your-subpage-url,//子頁面HTML地址，支持本地地址和網絡地址
      id:your-subpage-id,//子頁面標誌
      styles:{
        top:subpage-top-position,//子頁面頂部位置
        bottom:subpage-bottom-position,//子頁面底部位置
        width:subpage-width,//子頁面寬度，默認爲100%
        height:subpage-height,//子頁面高度，默認爲100%
        ......
      },
      extras:{}//額外擴展參數
    }]
  });

建立代碼比較簡單，以下：javascript

mui.init({
    subpages:[{
      url:'list.html',
      id:'list.html',
      styles:{
        top:'45px',//mui標題欄默認高度爲45px；
        bottom:'0px'//默認爲0px，可不定義；
      }
    }]
  });

其餘子頁面的新建：選含mui的html，body裏寫展現內容css

底部選項卡切換(WebView模式)：

demo1：html

<!doctype html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <link href="css/mui.min.css" rel="stylesheet" />
    </head>

    <body>
        <header class="mui-bar mui-bar-nav">
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
            <h1 class="mui-title">標題</h1>
        </header>
        <nav class="mui-bar mui-bar-tab">
            <a class="mui-tab-item mui-active" href="head.html">
                <span class="mui-icon mui-icon-home"></span>
                <span class="mui-tab-label">首頁</span>
            </a>
            <a class="mui-tab-item"  href="tel.html">
                <span class="mui-icon mui-icon-phone"></span>
                <span class="mui-tab-label">電話</span>
            </a>
            <a class="mui-tab-item"  href="email.html">
                <span class="mui-icon mui-icon-email"></span>
                <span class="mui-tab-label">郵件</span>
            </a>
            <a class="mui-tab-item"  href="set.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">
            var subpage = [head.html, tel.html,email.html, set.html];//頁面存入數組
            var styles = {
                top: 50 px,
                bottom: 51 px
            }
            min.plusReady(function() {
                var hash = plus.webview.currentWebview(); //獲取當前窗口
                for(var i = 0; i < hash.length; i++) {
                    //plus.webview.create(url, id, style);
                    var Newpage = plus.webview.create(subpage[i], subpage[i], styles);//建立子頁面
                    if(i > 0) {
                        Newpage.hide();//其餘頁面隱藏
                    }
                    hash.append(Newpage);//當前home頁顯示
                }
            });
            //點擊事件a
            var cativeTab = subpage[0];//默認第一頁顯示
            //mui('選擇器父級').on('tap', '選擇器子級', functioin() {});
            mui('.mui-bar').on('tap', 'a', functioin() {
                var targetTab = this.getAttribute('href');//獲取屬性   href值
                if(targetTab == cativeTab) {
                    return;
                }
                plus.webview.hide(cativeTab);
                cativeTab = targetTab;//值賦
                plus.webview.show(targetTab);
            })
            
        </script>
    </body>

</html>

底部選項卡切換(DIV模式)：

<header class="mui-bar mui-bar-nav">
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
            <h1 class="mui-title">底部選項卡切換(Div模式)</h1>
        </header>
        
        <nav class="mui-bar mui-bar-tab">
            <a class="mui-tab-item mui-active" href="#page1">
                <span class="mui-icon mui-icon-home"></span>
                <span class="mui-tab-label">首頁</span>
            </a>
            <a class="mui-tab-item" href="#page2">
                <span class="mui-icon mui-icon-phone"></span>
                <span class="mui-tab-label">電話</span>
            </a>
            <a class="mui-tab-item" href="#page3">
                <span class="mui-icon mui-icon-email"></span>
                <span class="mui-tab-label">郵件</span>
            </a>
            <a class="mui-tab-item" href="#page4">
                <span class="mui-icon mui-icon-gear"></span>
                <span class="mui-tab-label">設置</span>
            </a>
        </nav>
        
        
        <div class="mui-content">
            <div id="page1" class="mui-control-content mui-active">
                這是第一個頁面
            </div>
            <div id="page2" class="mui-control-content">
                這是第二個頁面
            </div>
            <div id="page3" class="mui-control-content">
                這是第三個頁面
            </div>
            <div id="page4" class="mui-control-content">
                這是第四個頁面
            </div>
        </div>

相關標籤/搜索

每日一句

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