2. 程式人生 > >MUI 底部導航 （選中高亮改變icon）

MUI 底部導航 （選中高亮改變icon）

阿新 • • 發佈：2019-02-03

底部導航欄應該是現在主流APP最常用的一種顯示方式，我個人也覺得底部導航欄最清晰直觀，一般以4-5個為宜。這裡我做了點小東西，就是點選某個選項卡的時候，它自動高亮，並且改變icon，這樣整體感覺就非常動感，比如資訊選項卡，未點選的時候是一個封閉的信封，一點就變成開啟的信封，要的就是這個效果。這裡主要用到如下幾種東西：【底部選項卡】，【外部icon引用】，【icon自動變換】，見程式碼和註釋，上面的都是廢話，一般的東西我都直接寫在註釋裡，這樣更加直觀。

//html部分，底部五個選項卡，public-icon-style這種css都是本人自己的css，設定一些icon的樣式，
//因為在MUI開發裡，不管是自帶icon還是外部引用的icon都是以字型樣式來處理，比如顏色，color,
//大小，font-size,如果引用自帶的icon非常簡單，直接兩個CSS:mui-icon和具體icon名稱，但是有些時
//候一些特殊的業務需求，比如找不到你需要的icon，比如你想像我一樣實現兩個狀態的icon動態切換，那
//就只能引用外部icon了，很簡單，方法如下，百度搜：阿里向量圖，或者直接輸入iconfont.cn/home，
//註冊，搜尋需要的icon然後，下載原始碼，這時解壓，我們需要兩個檔案，一個是iconfont.ttf檔案，也
//就是icon的字型標準檔案，放在我們font資料夾下面，還有一個iconfont.css檔案，也就是我們下載的
//icon樣式檔案，放在css資料夾下面，裡面有一段程式碼url('../fonts/iconfont.ttf?t=1533048640652')
// format('truetype'),地址改成剛才font資料夾下，其實你做一個專案，直接在阿里向量網站建一個
//專案，每次找icon都直接加入購物車，然後下載原始碼，這樣每次去下載好的檔案，解壓覆蓋即可
<nav class="mui-bar mui-bar-tab public-white-bg">
	    <a id="defaultTab" class="mui-tab-item mui-active" href="html/home.html">
	        <span class="mui-icon iconfont icon-shouye2 public-icon-style" id="home"></span>
	        <span class="mui-tab-label public-icon-style" id="hometa">首頁</span>
	    </a>
	    <a class="mui-tab-item" href="html/message.html">
	        <span class="mui-icon iconfont icon-icon-xinfeng" id="message"><span style="display: none;" class="mui-badge" >1</span></span>
	        <span class="mui-tab-label" id="messageta">資訊</span>
	    </a>
	    <a class="mui-tab-item" href="html/bigdata.html">
	        <span class="mui-icon iconfont icon-data" id="bigdata"></span>
	        <span class="mui-tab-label" id="bigdatata">大資料</span>
	    </a>
	     <a class="mui-tab-item" href="html/find.html">
	        <span class="mui-icon iconfont icon-pengyouquan" id="find"></span>
	        <span class="mui-tab-label" id="findta">發現</span>
	    </a>
	     <a class="mui-tab-item" href="html/know.html">
	        <span class="mui-icon iconfont icon-iconxuexi" id="know"></span>
	        <span class="mui-tab-label" id="knowta">知道</span>
	    </a>
</nav>


//script部分
//mui初始化
		mui.init();
//我的五個子頁面
		var subpages = ['html/home.html', 'html/message.html', 'html/bigdata.html','html/find.html','html/know.html'];
		var subpage_style = {
			top:'0px',
			bottom: '51px'
		};
		
		
		var aniShow = {};
		
		 //建立子頁面，首個選項卡頁面顯示，其它均隱藏；
		mui.plusReady(function() {
			var self = plus.webview.currentWebview();
			for (var i = 0; i < subpages.length; i++) {
				var temp = {};
				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);
				}
				self.append(sub);
			}
		});
		 //當前啟用選項
		var activeTab = subpages[0];
		
		 //選項卡點選事件
		mui('.mui-bar-tab').on('tap', 'a', function(e) {
			var targetTab = this.getAttribute('href');
			if (targetTab == activeTab) {
				return;
			}
			//顯示目標選項卡
			//將目標選項卡的icon替換
			changeIcon(targetTab);
			//若為iOS平臺或非首次顯示，則直接顯示
			if(mui.os.ios||aniShow[targetTab]){
				plus.webview.show(targetTab);
			}else{
				//否則，使用fade-in動畫，且儲存變數
				var temp = {};
				temp[targetTab] = "true";
				mui.extend(aniShow,temp);
				plus.webview.show(targetTab,"fade-in",300);
			}
			//隱藏當前;
			plus.webview.hide(activeTab);
			//更改當前活躍的選項卡
			activeTab = targetTab;
		});
		 //自定義事件，模擬點選“首頁選項卡”，在有需要的地方可以直接呼叫這種自定義事件
		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");
			//console.log(current);
			if (defaultTab !== current) {
				current.classList.remove('mui-active');
				defaultTab.classList.add('mui-active');
			}
		});
		
		
		//點選底部選項卡，替換icon圖示
		function changeIcon(targetTab){
			var home = document.getElementById('home');
			var message = document.getElementById('message');
			var bigdata = document.getElementById('bigdata');
			var find = document.getElementById('find');
			var know = document.getElementById('know');
			
			var hometa = document.getElementById('hometa');
			var messageta = document.getElementById('messageta');
			var bigdatata = document.getElementById('bigdatata');
			var findta = document.getElementById('findta');
			var knowta = document.getElementById('knowta');
			
			if(targetTab=='html/home.html'){
				home.classList.remove('icon-shouye');
				home.classList.add('icon-shouye2');
				home.classList.add('public-icon-style');
				hometa.classList.add('public-icon-style');
				
				message.classList.remove('icon-icon-xinfeng2');
				message.classList.add('icon-icon-xinfeng');
				message.classList.remove('public-icon-style');
				messageta.classList.remove('public-icon-style');
				bigdata.classList.remove('public-icon-style');
				bigdatata.classList.remove('public-icon-style');
				find.classList.remove('public-icon-style');
				findta.classList.remove('public-icon-style');
				know.classList.remove('public-icon-style');
				knowta.classList.remove('public-icon-style');
				
				bigdata.classList.remove('icon-data2');
				bigdata.classList.add('icon-data');
				find.classList.remove('icon-pengyouquan2');
				find.classList.add('icon-pengyouquan');
				know.classList.remove('icon-iconxuexi2');
				know.classList.add('icon-iconxuexi');
			}else if(targetTab=='html/message.html'){
				message.classList.remove('icon-icon-xinfeng');
				message.classList.add('icon-icon-xinfeng2');
				message.classList.add('public-icon-style');
				messageta.classList.add('public-icon-style');
				
				bigdata.classList.remove('public-icon-style');
				bigdatata.classList.remove('public-icon-style');
				find.classList.remove('public-icon-style');
				findta.classList.remove('public-icon-style');
				know.classList.remove('public-icon-style');
				knowta.classList.remove('public-icon-style');
				home.classList.remove('public-icon-style');
				hometa.classList.remove('public-icon-style');
				home.classList.remove('icon-shouye2');
				home.classList.add('icon-shouye');
				bigdata.classList.remove('icon-data2');
				bigdata.classList.add('icon-data');
				find.classList.remove('icon-pengyouquan2');
				find.classList.add('icon-pengyouquan');
				know.classList.remove('icon-iconxuexi2');
				know.classList.add('icon-iconxuexi');
			}else if(targetTab=='html/bigdata.html'){
				bigdata.classList.remove('icon-data');
				bigdata.classList.add('icon-data2');
				bigdata.classList.add('public-icon-style');
				bigdatata.classList.add('public-icon-style');
				
				home.classList.remove('icon-shouye2');
				home.classList.add('icon-shouye');
				message.classList.remove('icon-icon-xinfeng2');
				message.classList.add('icon-icon-xinfeng');
				find.classList.remove('icon-pengyouquan2');
				find.classList.add('icon-pengyouquan');
				know.classList.remove('icon-iconxuexi2');
				know.classList.add('icon-iconxuexi');
				message.classList.remove('public-icon-style');
				messageta.classList.remove('public-icon-style');
				home.classList.remove('public-icon-style');
				hometa.classList.remove('public-icon-style');
				find.classList.remove('public-icon-style');
				findta.classList.remove('public-icon-style');
				know.classList.remove('public-icon-style');
				knowta.classList.remove('public-icon-style');
			}else if(targetTab=='html/find.html'){
				find.classList.remove('icon-pengyouquan');
				find.classList.add('icon-pengyouquan2');
				find.classList.add('public-icon-style');
				findta.classList.add('public-icon-style');
				
				home.classList.remove('icon-shouye2');
				home.classList.add('icon-shouye');
				message.classList.remove('icon-icon-xinfeng2');
				message.classList.add('icon-icon-xinfeng');
				bigdata.classList.remove('icon-data2');
				bigdata.classList.add('icon-data');
				know.classList.remove('icon-iconxuexi2');
				know.classList.add('icon-iconxuexi');
				
				message.classList.remove('public-icon-style');
				messageta.classList.remove('public-icon-style');
				home.classList.remove('public-icon-style');
				hometa.classList.remove('public-icon-style');
				bigdata.classList.remove('public-icon-style');
				bigdatata.classList.remove('public-icon-style');
				know.classList.remove('public-icon-style');
				knowta.classList.remove('public-icon-style');
			}else if(targetTab=='html/know.html'){
				know.classList.remove('icon-iconxuexi');
				know.classList.add('icon-iconxuexi2');
				know.classList.add('public-icon-style');
				knowta.classList.add('public-icon-style');
				
				home.classList.remove('icon-shouye2');
				home.classList.add('icon-shouye');
				message.classList.remove('icon-icon-xinfeng2');
				message.classList.add('icon-icon-xinfeng');
				bigdata.classList.remove('icon-data2');
				bigdata.classList.add('icon-data');
				find.classList.remove('icon-pengyouquan2');
				find.classList.add('icon-pengyouquan');
				
				message.classList.remove('public-icon-style');
				messageta.classList.remove('public-icon-style');
				home.classList.remove('public-icon-style');
				hometa.classList.remove('public-icon-style');
				bigdata.classList.remove('public-icon-style');
				bigdatata.classList.remove('public-icon-style');
				find.classList.remove('public-icon-style');
				findta.classList.remove('public-icon-style');
				
			}
			
		}//其實做這種動態原理很簡單，就是你點選某個選項卡的時候，把它原來圖示CSS給
//刪除了，然後重新新增一個圖示CSS，其實我們做APP，主要還是做原理，做頁面，比如第一篇文章說的
//做那種縮放效果，你知道了原理就好做了，並不是什麼神奇的不得了的東西，但是你加上了，整個APP感
//覺就動態了，高階了，APP後臺互動不就是你傳引數，後臺返回你資料，這麼簡單，重點還
//是看HTML+CSS+JS+MUI(封裝框架),一點個人心得，大家見笑

程式碼留下了，當然需要幾張圖來直觀感受下，是我自己正在做的APP，一點點完成，一點點記錄，希望能幫到有需要的人

大家看我的資訊選項卡就是這種效果，未點選就是信封閉合狀態，一點選就開啟，是不是很有意思，也許你覺得P用沒有，那就PASS咯，只是個人喜好，希望APP能動感一點，好了，今天就記錄到這。

相關推薦

MUI 底部導航 （選中高亮改變icon）

底部導航欄應該是現在主流APP最常用的一種顯示方式，我個人也覺得底部導航欄最清晰直觀，一般以4-5個為宜。這裡我做了點小東西，就是點選某個選項卡的時候，它自動高亮，並且改變icon，這樣整體感覺就非常動感，比如資訊選項卡，未點選的時候是一個封閉的信封，一點就變成開啟的信封，要

mui 底部導航選單功能（原創）

簡單版 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>底部導航選單切換</title> <link h

Android TV 選中高亮顯示

add 頁面 androi radi ren att set lose main 1、開發Android TV APP， 使用遙控器選中按鈕或者選著其它菜單 如果沒有高亮顯示，就看不出選中哪個按鈕或者菜單 2、在drawable 添加 border_red.xml 設置選中

MUI底部導航欄切換效果

自定義事件 home nvi tlist -a person def fault nis 首先是html代碼： <nav class="mui-bar mui-bar-tab"> <a href="view

css實現線條樣式（中間高亮，兩邊透明）

div height round width eight style near 中間 樣式 .line{ width: 100%; height: 2px; background: linear-gradient( to

mui底部導航

    mui.init({         gestureConfig: {             doubleta

mui底部導航欄

引入mui檔案、下面會用到jquery，同時引進  <link rel="stylesheet" href="css/mui.min.css">         <script src="js/mui.min

MUI底部導航切換子頁面

reat document pen enter 標題 htm ttr active fun 1.登陸頁面進入之後，進入到main頁面，main頁面只有一個底部導航，然後引入子頁面進行渲染。 <nav class="mui-bar mui-bar-tab" i

vue導航欄自定義設定帶圖片（選中狀態重新整理不消失）

轉載自https://blog.csdn.net/wang1006008051/article/details/78686451?utm_source=blogxgwz6 Vue導航欄         用Vue寫手機端的專

常用正則表示式（高亮，markdown）

校驗數字的表示式 1 數字：^[0-9]*$ 2 n位的數字：^\d{n}$ 3 至少n位的數字：^\d{n,}$ 4 m-n位的數字：^\d{m,n}$ 5 零和非零開頭的數字：^(0|[1-9][0-9]*)$ 6 非零開頭的最多帶兩位小數的數字：^([1-9][0-9]*)+(

Fragment建立新增切換和對應底部導航（三）

目標：可以滑動Fragment來導航。 原來是通過FragmentManager新增Fragment後，show和hide來顯示和隱藏Fragment。 這裡使用Viewpager和FragmentPagerAdapter來實現。   把activity_main.xml中的FrameLay

織夢，導航首頁高亮解決方案

預設織夢導航欄目，首頁不可高亮，解決方案如下： 給a標籤新增active類 <a {dede:field name=typeid runphp="yes"} (@me=="")? @me="class='active'":@me=""; {/dede:field}

Qt 之 QSS（語法高亮）

簡述 語法高亮是文字編輯器用來顯示文字的，特別是原始碼，根據不同的類別來用不同的顏色和字型顯示。這個功能有助於編寫結構化的語言，例如：程式語言、標記語言，這些語言的語法錯誤顯示是有區別的。 | 詳細描述 語法高亮

MUI-底部導航切換頁面

 要實現儒商的效果： 1、建立4個html檔案，分別為主頁面index.html，三個子頁面a.html、b.html、c.html，如下： 2、迴圈建立子頁面 3、處理點選事件 4、退出系統後，再次進入系統，要顯示初始化狀態 5、這裡只給出index.htm

selector實現按鈕選中高亮效果原理

按鈕選中高亮常規程式碼如下： <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android">

mac下vim的16種配色方案（程式碼高亮）展示，及配置

下面給大家展示一下mac下所有vim的配色方案的樣式。 darkblue  delek  elflord  koehler  murphy  peachpuff  sh

vue程式設計式導航及路由高亮

1.在方法中實現 this.$router.push({path:"/hello"})//跳轉到hello頁面 2.replace方法是不向history中新增新紀錄 this.$router.replace({path:"router"}) 3.go的使用 this.$rout

一步一步教你寫股票走勢圖——K線圖四（高亮聯動一）

k線圖的第二節末尾，已經初步講解了高亮聯動，但是效果沒有達到我們的預期，因為k線圖本身就支援左右滾動，所以在滾動高亮的時候就出現了衝突，我們那會只實現了點選圖表，實現高亮的展示，但是效果還是太差，所以才有了我們今天這節的內容，將會優化體驗效果

Android ListView item 選中高亮顯示之高效實現方式

之前在一篇文章中提到過  的實現方式，具體可以檢視這篇博文，這裡提供另外一種更為高效的方式。 先看效果 未選中時 選中某一項時 下面通過一段程式碼來講解實現過程 activity_main.xml <RelativeLayout xmlns:andro

secureCRT配置vim編輯器（語法高亮等）

" 只在下列檔案型別被偵測到的時候顯示行號，普通文字檔案不顯示 if has("autocmd")    autocmd FileType xml,html,c,cs,java,perl,shell,bash,cpp,python,vim,php,ruby set number    autocmd File