2. 程式人生 > >MUI框架-12-使用原生底部選項卡（凸出圖示案例）

MUI框架-12-使用原生底部選項卡（凸出圖示案例）

阿新 • • 發佈：2018-11-07

MUI框架-12-使用原生底部選項卡（凸出圖示案例）

今天，用 mui 做 app 時，遇到了可能各位都遇到過的頭疼問題：底部中間圖示凸起，如下圖：
在這裡插入圖片描述

最後有原始碼

【提示】：有人問我在 HBuilder 中看不到底部欄，請不要慌，程式碼沒有問題，在模擬器或者真機執行才會有，原生，原生。

1、mainifest.json程式碼修改如下，主要就是將官方 mui tab 底部凸起案例的字型圖示換成了圖片：

"launchwebview": {
	 "bottom": "0px",
	 "background": "#fff",
	 "subNViews": [
	 {
	 "id": "tabBar",
	 "styles": {
	 "bottom": "0px",
	 "left": "0",
	 "height": "50px",
	 "width": "100%",
	 "backgroundColor": "#fff"
	 },
	 "tags": [
	 {
	 "tag": "img",
	 "id": "homeIcon",
	 "src": "images/home_nor.png",
	 "position": {
	 "top": "4px",
	 "left": "10%",
	 "width": "25px",
	 "height": "40px"
	 }
	 },{
	 "tag": "img",
	 "id": "scheduleIcon",
	 "src": "images/schedule_nor.png",
	 "position": {
	 "top": "4px",
	 "left": "30%",
	 "width": "25px",
	 "height": "40px"
	 }
	 },{
	 "tag": "img",
	 "id": "goodsIcon",
	 "src": "images/goods_nor.png",
	 "position": {
	 "top": "4px",
	 "left": "65%",
	 "width": "25px",
	 "height": "40px"
	 }
	 },{
	 "tag": "img",
	 "id": "mineIcon",
	 "src": "images/mine_nor.png",
	 "position": {
	 "top": "4px",
	 "left": "85%",
	 "width": "25px",
	 "height": "40px"
	 }
	 }
	 ]
	 }
	 ]
	}

2、util.js程式碼修改如下（主要將字型顏色配置都換成了圖片，並且將subpages變成了物件陣列，增加了id和url欄位，這樣更加符合實際需求，新增了首頁，並且初始化顯示第一頁）：

	var util = {
	 options: {
	 ACTIVE_SRC1: "images/home_click.png",
	 NORMAL_SRC1: "images/home_nor.png",
	 ACTIVE_SRC2: "images/schedule_click.png",
	 NORMAL_SRC2: "images/schedule_nor.png",
	 ACTIVE_SRC3: "images/goods_click.png",
	 NORMAL_SRC3: "images/goods_nor.png",
	 ACTIVE_SRC4: "images/mine_click.png",
	 NORMAL_SRC4: "images/mine_nor.png",
	 subpages: [{
	 url : 'pages/home.html',
	 id : 'home'
	 },{
	 url : 'pages/schedule.html',
	 id : 'schedule'
	 },{
	 url : 'pages/goods.html',
	 id : 'goods'
	 },{
	 url : 'pages/mine.html',
	 id : 'mine'
	 },]
	 },
	 /**
	  *  簡單封裝了繪製原生view控制元件的方法
	  *  繪製內容支援font（文字，字型圖示）,圖片img , 矩形區域rect
	  */
	 drawNative: function(id, styles, tags) {
	 var view = new plus.nativeObj.View(id, styles, tags);
	 return view;
	 },
	 /**
	  * 初始化首個tab視窗 和 建立子webview視窗
	  */
	 initSubpage: function(aniShow) {
	 var subpage_style = {
	 top: 0,
	 bottom: 51
	 },
	 subpages = util.options.subpages,
	 self = plus.webview.currentWebview(),
	 temp = {};
	 //相容安卓上新增titleNView 和 設定沉浸式模式會遮蓋子webview內容
	 if(mui.os.android) {
	 if(plus.navigator.isImmersedStatusbar()) {
	 subpage_style.top += plus.navigator.getStatusbarHeight();
	 }
	 if(self.getTitleNView()) {
	 subpage_style.top += 40;
	 }
	 }
	 
	 // 初始化第一個tab項為首次顯示
	 temp[self.id] = "true";
	 mui.extend(aniShow, temp);
	 
	 // 初始化繪製首個tab按鈕
	 util.toggleNview(0);
	 
	 //預載入所有子頁面
	 for(var i = 0, len = subpages.length; i < len; i++) {
	 if(!plus.webview.getWebviewById(subpages[i].id)) {
	 var sub = plus.webview.create(subpages[i].url, subpages[i].id, subpage_style);
	 //初始化隱藏
	 sub.hide();
	 // append到當前父webview
	 self.append(sub);
	 }
	 }
	 
	 //初始化顯示第一個子頁面
	 plus.webview.show(plus.webview.getWebviewById(subpages[0].id));
	 
	 },
	 /**
	  * 點選切換tab視窗
	  */
	 changeSubpage: function(targetPage, activePage, aniShow) {
	 //若為iOS平臺或非首次顯示，則直接顯示
	 if(mui.os.ios || aniShow[targetPage]) {
	 plus.webview.show(targetPage);
	 } else {
	 //否則，使用fade-in動畫，且儲存變數
	 var temp = {};
	 temp[targetPage] = "true";
	 mui.extend(aniShow, temp);
	 plus.webview.show(targetPage, "fade-in", 300);
	 }
	 //隱藏當前 除了第一個父視窗
	 if(activePage !== plus.webview.getLaunchWebview()) {
	 plus.webview.hide(activePage);
	 }
	 },
	 /**
	  * 點選重繪底部tab （view控制元件）
	  */
	 toggleNview: function(currIndex) {
	 // 重繪當前tag 包括icon和text，所以執行兩個重繪操作
	 switch(currIndex){
	 case 0 :
	 util.updateSubNView(0, util.options.ACTIVE_SRC1);
	 util.updateSubNView(1, util.options.NORMAL_SRC2);
	 util.updateSubNView(2, util.options.NORMAL_SRC3);
	 util.updateSubNView(3, util.options.NORMAL_SRC4);
	 break;
	 case 1 :
	 util.updateSubNView(0, util.options.NORMAL_SRC1);
	 util.updateSubNView(1, util.options.ACTIVE_SRC2);
	 util.updateSubNView(2, util.options.NORMAL_SRC3);
	 util.updateSubNView(3, util.options.NORMAL_SRC4);
	 break;
	 case 2 :
	 util.updateSubNView(0, util.options.NORMAL_SRC1);
	 util.updateSubNView(1, util.options.NORMAL_SRC2);
	 util.updateSubNView(2, util.options.ACTIVE_SRC3);
	 util.updateSubNView(3, util.options.NORMAL_SRC4);
	 break;
	 case 3 :
	 util.updateSubNView(0, util.options.NORMAL_SRC1);
	 util.updateSubNView(1, util.options.NORMAL_SRC2);
	 util.updateSubNView(2, util.options.NORMAL_SRC3);
	 util.updateSubNView(3, util.options.ACTIVE_SRC4);
	 break;
	 }
	 },
	 /*
	  * 利用 plus.nativeObj.View 提供的 drawBitmap 方法更新 view 控制元件
	  */
	 updateSubNView: function(currIndex, src) {
	 var self = plus.webview.currentWebview(),
	 nviewEvent = plus.nativeObj.View.getViewById("tabBar"), // 獲取nview控制元件物件
	 nviewObj = self.getStyle().subNViews[0], // 獲取nview物件的屬性
	 currTag = nviewObj.tags[currIndex]; // 獲取當前需重繪的tag
	 nviewEvent.drawBitmap(src,'',currTag.position, currTag.id);
	 }
	};

3、index.html程式碼修改如下(主要將中間凸起的效果有原來的字型圖示改成了圖片)：

<!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>
		<script src="js/mui.min.js"></script>
		<link href="css/mui.min.css" rel="stylesheet" />
		<style>
			html,
			body {
				background-color: #efeff4;
			}
			
			.title {
				margin: 20px 15px 10px;
				color: #6d6d72;
				font-size: 15px;
				padding-bottom: 51px;
			}
		</style>
	</head>

	<body>
		<script src="js/util.js"></script>
		<script type="text/javascript">
			(function() {
				mui.init({
					swipeBack: true //啟用右滑關閉功能
				});
				mui.plusReady(function() {
					var self = plus.webview.currentWebview(),
						leftPos = Math.ceil((window.innerWidth - 60) / 2); // 設定凸起大圖示為水平居中
					/**
					 * drawNativeIcon 繪製凸起圓，
					 * 實現原理：
					 *   id為bg的tag 建立帶邊框的圓
					 *   id為bg2的tag 建立白色矩形遮住圓下半部分，只顯示凸起帶邊框部分
					 *   id為iconBg的紅色背景圖
					 *   id為icon的字型圖示
					 *   注意建立先後順序，建立越晚的層級越高
					 */
					var drawNativeIcon = util.drawNative('icon', {
						bottom: '5px',
						left: leftPos + 'px',
						width: '60px',
						height: '60px'
					}, [{
						tag: 'rect',
						id: 'bg',
						position: {
							top: '1px',
							left: '0px',
							width: '100%',
							height: '100%'
						},
						rectStyles: {
							color: '#fff',
							radius: '50%',
							borderColor: '#ccc',
							borderWidth: '1px'
						}
					}, {
						tag: 'rect',
						id: 'bg2',
						position: {
							bottom: '-0.5px',
							left: '0px',
							width: '100%',
							height: '45px'
						},
						rectStyles: {
							color: '#fff'
						}
					}, {
						tag: 'rect',
						id: 'iconBg',
						position: {
							top: '5px',
							left: '5px',
							width: '50px',
							height: '50px'
						},
						rectStyles: {
							color: '#0ab88e',
							radius: '50%'
						}
					}, {
						tag: 'img',
						id: 'icon',
						position: {
							top: '15px',
							left: '15px',
							width: '30px',
							height: '30px'
						},
						src: 'images/icon_scan.png'
					}]);
					// 將繪製的凸起 append 到父webview中
					self.append(drawNativeIcon);

					//凸起圓的點選事件
					var active_color = '#fff';
					drawNativeIcon.addEventListener('click', function(e) {
						mui.openWindow({
							id: 'scan',
							url: 'pages/scan.html'
						})
					});
					// 中間凸起圖示繪製及監聽點選 完畢

					// 建立子webview視窗 並初始化
					var aniShow = {};
					util.initSubpage(aniShow);

					//初始化相關引數
					var nview = plus.nativeObj.View.getViewById('tabBar'),
						activePage = plus.webview.currentWebview(),
						targetPage,
						subpages = util.options.subpages,
						pageW = window.innerWidth,
						currIndex = 0;

					/**
					 * 根據判斷view控制元件點選位置判斷切換的tab
					 */
					nview.addEventListener('click', function(e) {
						var clientX = e.clientX;
						if(clientX >= 0 && clientX <= parseInt(pageW * 0.25)) {
							currIndex = 0;
						} else if(clientX > parseInt(pageW * 0.25) && clientX <= parseInt(pageW * 0.45)) {
							currIndex = 1;
						} else if(clientX > parseInt(pageW * 0.45) && clientX <= parseInt(pageW * 0.8)) {
							currIndex = 2;
						} else {
							currIndex = 3;
						}
						// 匹配對應tab視窗
						if(plus.webview.getWebviewById(subpages[currIndex].id) == plus.webview.currentWebview()) {
							return;
						} else {
							targetPage = plus.webview.getWebviewById(subpages[currIndex].id);
						}

						//底部選項卡切換
						util.toggleNview(currIndex);
						// 子頁面切換
						util.changeSubpage(targetPage, activePage, aniShow);
						//更新當前活躍的頁面
						activePage = targetPage;

					});
				});
			})();
		</script>
	</body>

</html>

原始碼下載地址：

更多文章：

相關推薦

MUI框架-12-使用原生底部選項卡（凸出圖示案例）

MUI框架-12-使用原生底部選項卡（凸出圖示案例） 今天，用 mui 做 app 時，遇到了可能各位都遇到過的頭疼問題：底部中間圖示凸起，如下圖： 最後有原始碼 【提示】：有人問我在 HBuilder 中看不到底部欄，請不要慌，程式碼沒有問題，在模擬器或者真機執行才會有，

MUI框架開發HTML5手機APP(二)--頁面跳轉傳值&底部選項卡切換

  概 述 JRedu 　　在上一篇部落格中，我們學習瞭如何使用Hbuilder建立一個APP，同時如何使用MUI搭建屬於自己的第一款APP，沒有學習的同學可以戳連結學習： http://www.cnblogs.com/jerehedu/p/7832808.html   　　今天這篇部落格，我們繼續深入學習

mui.openWindow('login.html')與window.open('login.open')跳轉底部選項卡的問題，記錄一下

需求就是帶有底部選項卡的頁面(myself.html)跳轉登入(login.html)時， 通常用onclick=“javascript:history.back(-1)可以直接返回； 但是當有邏輯判斷時（比如登入驗證，驗證碼身份驗證）   在login.h

dcloud------mui 點選底部選項卡，獲取文字內容

<nav class="mui-bar mui-bar-tab"><a id="defaultTab" class="mui-tab-item mui-active" ><span class="mui-icon mui-icon-home"></span>&l

tab切換選項卡 （原生/jQ/vue） 實現方式

<!DOCTYPE > <html> <meta http-equiv="Content-Type" content="text/html; charset=utf

mui軟鍵盤頂起底部選項卡

var originalHeight=document.documentElement.clientHeight || document.body.clientHeight; window.onresize=function(){ //軟鍵盤彈起與隱藏 都會引起視窗的高

HTML5 開發APP(頭部和底部選項卡)

技術 開發 方法 eat 激活 default 底部 top doc 我們開發app有一定固定的樣式，比如頭部和底部選項卡部分就是公共部分就比如我在做的app進來的主頁面就像圖片顯示的那樣 我們該怎麽實現呢，實現我們應該建一個主頁面index.html，然後建五個子頁面

js原生實現選項卡功能

doc pre pan element gre rip class isp height 結構：<div id="box"> 　　<input type="button" value="書籍" class="on"> 　　<in

選項卡（1）

lec set 樣式 gin relative ctype ive css樣式 lac 選項卡控件它提供一系列操作按鈕，單擊不同的按鈕可以在各個頁面之間進行切換。 選項卡實現的幾種方法： html+css <!DOCTYPE html> <htm

mui的底部導航欄（引用外部圖片）

<!-- 底部導航 --> <nav class="mui-bar mui-bar-tab"> <a class="mui-tab-item mui-active" href="index" id="index">

tab選項卡（1）：一級tab選項卡

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <style>

JS學習筆記 - 面向物件 - 選項卡 （普通選項卡改寫）

  選項卡3 <script> window.onload=function () { new TabSwitch('div1'); }; function TabSwitch(id) // TabSwitch 是 id 的 物件？？ { // var oDi

選項卡（Tab）切換事件

選項卡切換事件 <style type="text/css"> *{margin: 0; padding: 0; font-family: "微軟雅黑";font-size: 14px;} #container{ width: 398px; ma

Fragment實現底部選項卡切換效果

現在很多APP的樣式都是底部選項卡做為首頁的，實現這樣的效果，我們一般有這樣幾種方式，第一，最屌絲的做法，我直接自定義選項卡檢視，通過監聽選項卡檢視，邏輯控制內容頁的切換，這樣做的想法一般是反正這幾個介面基本都是常駐記憶體的，不用去關心它的快取和回收。第二種，用TabHos

Java選項卡（JTabbedPane）的使用

JTabbedPane是一種可以放多個面板的並且可以方便切換的容器 1.  建構函式 （1）JTabbedPane( )  建立空的JTabbedPane物件，但實際它的默             認值為JTabbedPane.Top,也就是說卡片名將放在容器頂部。 （2

Android底部選項卡簡單佈局

之前做專案的時候經常會遇到選項卡配合fragment來切換介面，今天給大家分享個簡單的選項卡的佈局 上程式碼： 首先是xml佈局 也是很簡單 不需要寫註釋， tabshow1.xml <?xml version="1.0" encoding="u

//BottomTabBar實現底部選項卡

public class MyActivty_Main extends AppCompatActivity {     private BottomTabBar bottomTabBar;     private List<Fragment> list;     private SharedPre

Android底部選項卡之Fragment

歡迎初學者可以進行學習借鑑，此篇文章主要介紹android底部選項卡用法，希望能夠幫助到大家； 1，xml介面，分為新建四個，根據自己專案來，我就建立一個，其它的都一樣的，如：fragment1.xml， fragment2.xml,fragmen

底部選項卡凸出底部欄的解決辦法

很明顯，下面的tab選項卡的根佈局肯定用LinearLayout,item選項卡的weight設定為1平分LinearLayout的空間，但是釋出這個按鈕是凸出來的，將釋出這個按鈕放在裡面好像有點問題，我想了一個上午都沒想出來，特此寫下博文記錄下我的遭遇，其實用clipChildren這個屬性就可以了。測試程

仿御泥坊 完美實現電商類專案底部選項卡切換Fragment頁面

此為Activity頁面XML佈局 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.andr