MUI框架-12-使用原生底部选项卡（凸出图标案例）

水深无声 2022-04-18 01:44 626阅读 0赞

### MUI框架-12-使用原生底部选项卡（凸出图标案例） ###

今天，用 mui 做 app 时，遇到了可能各位都遇到过的头疼问题：底部中间图标凸起，如下图：  
![在这里插入图片描述][20181106172924182.jpg]

**最后有源代码**

【提示】：有人问我在 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字段，这样更加符合实际需求，新增了首页，并且初始化显示第一页）：

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>

### 源码下载地址： ###

*  地址：[https://download.csdn.net/download/qq\_40147863/10768519][https_download.csdn.net_download_qq_40147863_10768519]

### 更多文章： ###

*  博客园：[MUI 框架][MUI]
 *  CSDN：[MUI 框架][MUI 1]

[20181106172924182.jpg]: /images/20220418/da498cbc0ecf43b2878e9173056f677f.png
[https_download.csdn.net_download_qq_40147863_10768519]: https://download.csdn.net/download/qq_40147863/10768519
[MUI]: https://www.cnblogs.com/xpwi/category/1307862.html
[MUI 1]: https://blog.csdn.net/qq_40147863/article/category/8079041