MUI-底部导航切换页面
生活随笔
收集整理的這篇文章主要介紹了
MUI-底部导航切换页面
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
?要實(shí)現(xiàn)儒商的效果：
1、創(chuàng)建4個(gè)html文件，分別為主頁面index.html，三個(gè)子頁面a.html、b.html、c.html，如下：
2、循環(huán)創(chuàng)建子頁面
3、處理點(diǎn)擊事件
4、退出系統(tǒng)后，再次進(jìn)入系統(tǒng)，要顯示初始化狀態(tài)
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">底部導(dǎo)航</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">發(fā)現(xiàn)</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',//當(dāng)頁面內(nèi)容較多出現(xiàn)滾動(dòng)條時(shí),隱藏};// 記錄展示結(jié)果集var aniShow = {};//1、創(chuàng)建子頁面，首個(gè)選項(xiàng)卡頁面顯示，其它均隱藏；mui.plusReady(function() {// 獲取自身var self = plus.webview.currentWebview();// 循環(huán)創(chuàng)建子頁面for (var i = 0; i < subpages.length; i++) {var temp = {};// 創(chuàng)建子頁面,create(url,id,styles)var sub = plus.webview.create(subpages[i], subpages[i], subpage_style);if (i > 0) {//不是第一個(gè)頁面,則隱藏sub.hide();} else {//第一個(gè)頁面temp[subpages[i]] = "true";// 把兩個(gè)對(duì)象合并成一個(gè)對(duì)象,mui.extend(aniShow, temp);// console.log(JSON.stringify(aniShow));// aniShow輸出{"a.html":"true"}}// 把子頁面追加到自身self.append(sub);}});//當(dāng)前激活選項(xiàng),默認(rèn)為第一個(gè)子頁面var activeTab = subpages[0];//2、選項(xiàng)卡點(diǎn)擊事件mui('.mui-bar-tab').on('tap', 'a', function(e) {// 獲取當(dāng)前點(diǎn)擊tab的href屬性var targetTab = this.getAttribute('href');// 當(dāng)前子頁面=激活的頁面,不操作if (targetTab == activeTab) {return;}//1、顯示目標(biāo)選項(xiàng)卡//若為iOS平臺(tái)或非首次顯示(不是第一次顯示)，則直接顯示if (mui.os.ios || aniShow[targetTab]) {console.log(aniShow[targetTab]);//輸出trueplus.webview.show(targetTab);} else {//第一次點(diǎn)擊tab才顯示//否則，使用fade-in動(dòng)畫，且保存變量var temp = {};temp[targetTab] = "true";// 合并對(duì)象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、隱藏當(dāng)前;plus.webview.hide(activeTab);//3、更改當(dāng)前活躍的選項(xiàng)卡activeTab = targetTab;});//3、退出系統(tǒng)時(shí)，默認(rèn)還是加載初始化的頁面，自定義事件，模擬點(diǎn)擊“首頁選項(xiàng)卡”document.addEventListener('gohome', function() {var defaultTab = document.getElementById("defaultTab");//模擬首頁點(diǎn)擊mui.trigger(defaultTab, 'tap');//切換選項(xiàng)卡高亮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>?
總結(jié)
以上是生活随笔為你收集整理的MUI-底部导航切换页面的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 麻雀算法优化长短期记忆网络进行水位水库预
- 下一篇： Python抓取电商平台数据 / 采集商