mui 創建子頁面

<nav class="mui-bar mui-bar-tab" id="nav">
            <a class="mui-tab-item mui-active" id="0">
                <span class="mui-icon mui-icon-home"></span>
                <span class="mui-tab-label">首頁</span>
            </a>
            <a class="mui-tab-item" id="1">
                <span class="mui-icon mui-icon-paperplane"></span>
                <span class="mui-tab-label">巡課</span>
            </a>
            <a class="mui-tab-item" id="2">
                <span class="mui-icon mui-icon-compose"></span>
                <span class="mui-tab-label">反饋</span>
            </a>
            <a class="mui-tab-item" id="3">
                <span class="mui-icon mui-icon-flag"></span>
                <span class="mui-tab-label">課程</span>
            </a>
            <a class="mui-tab-item" id="4">
                <span class="mui-icon mui-icon-person"></span>
                <span class="mui-tab-label">通訊錄</span>
            </a>
        </nav>

 

js

<script type="text/javascript">
    
mui.plusReady(function() {
                //設置默認打開首頁顯示的子頁序號
                var Index = 0;
                //把子頁面路徑寫在數組裏面
                var subpages = ['home.html', 'xunke.html', 'feedback.html', 'course.html', 'mine.html']
                //獲取當前頁面所屬的Webview窗口對象
                var self = plus.webview.currentWebview();
                for(var i = 0; i < 5; i++) {
                    //創建webview子頁
                    var sub = plus.webview.create(
                        subpages[i], //子頁url
                        subpages[i], //子頁id
                        {
                            top: '50px',
                            bottom: '44px',
                            scrollIndicator: "none" //隱藏滾動條
                        }
                    );
                    //如果不是我們設置的子頁就隱藏
                    if(i != Index) {
                        sub.hide()
                    }
                    //將webview對象填充到窗口
                    self.append(sub)
                }
 
                //當前激活選項
                var activeTab = subpages[Index]
                var targetTab;
                mui('.mui-bar-tab').on('tap', 'a', function(e) {
                    //獲取子頁面的id
                    var j = this.getAttribute('id')
                    targetTab = subpages[j]
                    if(activeTab == targetTab) {
                        return
                    }
                    //顯示目標選項卡
                    plus.webview.show(targetTab)
                    //隱藏當前選項卡
                    plus.webview.hide(activeTab)
                    //更改當前活躍選項卡
                    activeTab = targetTab
         })
            })
</script>