MUI-底部导航切换页面
生活随笔
收集整理的這篇文章主要介紹了
MUI-底部导航切换页面
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
?要實現儒商的效果：
1、創建4個html文件，分別為主頁面index.html，三個子頁面a.html、b.html、c.html，如下：
2、循環創建子頁面
3、處理點擊事件
4、退出系統后，再次進入系統，要顯示初始化狀態
5、這里只給出index.html主頁面的代碼， a? b c 頁面沒有js邏輯，不給出源碼了
<!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><link href="css/mui.min.css" rel="stylesheet" /><script src="js/mui.min.js"></script></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 id="defaultTab" class="mui-tab-item mui-active" href="a.html"><span class="mui-icon mui-icon-videocam"></span><span class="mui-tab-label">發現</span></a><a class="mui-tab-item" href="b.html"><span class="mui-icon mui-icon-chatboxes"><span class="mui-badge">9</span></span><span class="mui-tab-label">消息</span></a><a class="mui-tab-item" href="c.html"><span class="mui-icon mui-icon-home"></span><span class="mui-tab-label">我的</span></a></nav><script type="text/javascript">//mui初始化mui.init();// 子頁面集合var subpages = ['a.html', 'b.html', 'c.html'];// 子頁面樣式var subpage_style = {top: '44px',bottom: '51px',scrollIndicator:'none',//當頁面內容較多出現滾動條時,隱藏};// 記錄展示結果集var aniShow = {};//1、創建子頁面，首個選項卡頁面顯示，其它均隱藏；mui.plusReady(function() {// 獲取自身var self = plus.webview.currentWebview();// 循環創建子頁面for (var i = 0; i < subpages.length; i++) {var temp = {};// 創建子頁面,create(url,id,styles)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);// console.log(JSON.stringify(aniShow));// aniShow輸出{"a.html":"true"}}// 把子頁面追加到自身self.append(sub);}});//當前激活選項,默認為第一個子頁面var activeTab = subpages[0];//2、選項卡點擊事件mui('.mui-bar-tab').on('tap', 'a', function(e) {// 獲取當前點擊tab的href屬性var targetTab = this.getAttribute('href');// 當前子頁面=激活的頁面,不操作if (targetTab == activeTab) {return;}//1、顯示目標選項卡//若為iOS平臺或非首次顯示(不是第一次顯示)，則直接顯示if (mui.os.ios || aniShow[targetTab]) {console.log(aniShow[targetTab]);//輸出trueplus.webview.show(targetTab);} else {//第一次點擊tab才顯示//否則，使用fade-in動畫，且保存變量var temp = {};temp[targetTab] = "true";// 合并對象mui.extend(aniShow, temp);console.log(JSON.stringify(aniShow));// aniShow輸出 {"a.html":"true","b.html":"true"}// aniShow輸出 {"a.html":"true","b.html":"true","c.html":"true"} plus.webview.show(targetTab, "fade-in", 300);}//2、隱藏當前;plus.webview.hide(activeTab);//3、更改當前活躍的選項卡activeTab = targetTab;});//3、退出系統時，默認還是加載初始化的頁面，自定義事件，模擬點擊“首頁選項卡”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');}});</script></body> </html>?
總結
以上是生活随笔為你收集整理的MUI-底部导航切换页面的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 麻雀算法优化长短期记忆网络进行水位水库预
- 下一篇： 详细的渗透思路（转Mr-xn）