uniapp 实现tabBar图标凸起的两种方式（App端）

怼烎@ 2023-03-02 13:27 57阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTc4ODY5MQ_size_16_color_FFFFFF_t_70_pic_center]

> 开发中客户可能会需求App端的tabBar中间的图标凸起，以实现更好的审美观。但如何实现呢？我这里推荐的两种方式，第一种是查阅相关例子按需配置隐藏于显示实现的，第二种是自己按官方文档配置midButton 自定义实现的。  
> uni-app版本更新到2.3.5后App平台 重构 tabBar，原生支持 midButton（中间凸起），支持高度调节（App、H5默认高度统一为50px），降低内存占用，避免iOS白屏。

github: [https://github.com/Front97721/uniapp-tabBarRaised.git][https_github.com_Front97721_uniapp-tabBarRaised.git]

先看效果吧！！嘿嘿！！  
![在这里插入图片描述][20200729185141381.gif]  
![在这里插入图片描述][20200730083057143.gif]  
![在这里插入图片描述][20200730152854529.gif]  
**按需配置隐藏于显示**

按平常一样配置pages.json

"tabBar": { 
    		"color": "#999999",
    		"selectedColor": "#FA4740",
    		"borderStyle": "black",
    		"backgroundColor": "#ffffff",
    		"list":[{ 
    				"fontSize": "11px",
    				"pagePath": "pages/index/index",
    				"iconPath": "static/logo.png",
    				"selectedIconPath": "static/logo.png",
    				"text": "首页"
    			},
    			{ 
    				"pagePath": "pages/classification/classification",
    				"iconPath": "static/logo.png",
    				"selectedIconPath": "static/logo.png",
    				"text": "分类"
    			},
    			{ 
    				"pagePath": "pages/circle/circle",
    				"iconPath": "static/circle.png",
    				"selectedIconPath": "static/circle.png",
    				"text": "圈子"
    			},
    			{ 
    				"pagePath": "pages/order/order",
    				"iconPath": "static/logo.png",
    				"selectedIconPath": "static/logo.png",
    				"text": "购物车"
    			},
    			{ 
    				"pagePath": "pages/my/my",
    				"iconPath": "static/logo.png",
    				"selectedIconPath": "static/logo.png",
    				"text": "我的"
    			}]
    	}

加载图片（index.vue）

onLoad() { 
        bitmap = new plus.nativeObj.Bitmap('bmp1');  //新增原生图片
        //bitmap.load('static/circle.png', function() {}, function(e) {}); //普通写法
        //兼容ios端
        bitmap.loadBase64Data('base64图片地址', function() { }, function(e) { });
        this.createtab();
    }

这为了兼容IOS端，需要用base64图片地址（[转换工具][Link 1]），我尝试了一下用GIF动态图也OK的,就是转base64时编码好多，卡卡的，不过可以用普通写法（非IOS端）。

设置凸起按钮样式位置（index.vue）

methods: { 
    	createtab: function(){ 
    		// 设置水平居中位置
    		var leftPos = Math.ceil((plus.screen.resolutionWidth - 50) / 2);
    		var view = new plus.nativeObj.View('icon', { 
    			bottom: '19px',
    			left: leftPos + 'px',
    			width: '50px',
    			height: '50px'
    		});
    		//使用canvas画布把图标画到tabbar对应位置上
    		view.drawBitmap(bitmap, { 
    			tag: 'font',
    			id: 'icon',
    			src: '/static/app-tabber/app-tabber.png',
    			position: { 
    				top: '0px',
    				left: '5px',
    				width: '50px',
    				height: '100%'
    			}
    		});
    		//监听界面跳转
    		view.addEventListener("click", function(e) { 
    			uni.switchTab({ 
    				url: '/pages/circle/circle'
    			})
    		}, false);
    		view.show();
    	}
    }

显示凸起图标（index.vue）

onShow() {  //显示突起图标
    	var icon = plus.nativeObj.View.getViewById("icon");  //根据图标id取到图片
    	if (icon) { 
    		setTimeout(function(){ 
    			icon.show();
    		},50)
    	}
    },

二级页面隐藏tabBar  
方式一：

() { 
        /* 隐藏tabBar图标 */
        var icon = plus.nativeObj.View.getViewById("icon");
        setTimeout(function() { 
            icon.hide();
        }, 100);
    }

方式二：  
以前遇到，好像page.json中配置，忘了！持续更新------

**配置midButton**

参照 [官方文档][Link 2]

midButton就是中间按钮，有的文档说仅在 list 项为偶数时有效，其实不然。

配置midButton及路由（page.json）

//tabBar下配置midButton，设置图标的大小并编译到App端
    // #ifdef APP-PLUS
    	"midButton": { 
    		  "pagePath": "pages/circle/circle",
    		  "iconPath": "static/circle.png",
    		  "width": "60px",
    		  "height": "65px",
    		  "iconWidth": "40px",
    		  "text": "圈子"
    },
    // #endif

//配置凸起图标路由及编译到App端
    // #ifndef APP-PLUS
    	{ 
    		"pagePath": "pages/circle/circle",
    		"fontSize":"11px",
    		"iconPath": "static/circle.png",
    		"selectedIconPath": "static/circle.png",
    		"text": "圈子"
    	},
    // #endif

配置二级界面的跳转及隐藏tabBar(App.vue)

uni.onTabBarMidButtonTap(function() { 
    					 	uni.navigateTo({ 
    					 		url: '/pages/circle/circle'
    					 	})
    					 })

**总结：**

*  按需配置隐藏于显示，主要是在首页配置对应的图标加载、tabbar图标凸起及显示，子页面配置对应的tabbar隐藏。不好的地方就是每个子页面都要配置对应的tabbar隐藏。
 *  配置midButton，主要是page.json配置midButton中间件、相关路由和图标凸起及相关编译平台。App.vue配置凸起图标的二级跳转。
 *  都说uniapp是万能的—所有的东西都不是万能，所以相信以后会慢慢实现更多的。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTc4ODY5MQ_size_16_color_FFFFFF_t_70_pic_center 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTc4ODY5MQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20230208/166c96fd954a4edaa69ba62ac5f3ee39.png
[https_github.com_Front97721_uniapp-tabBarRaised.git]: https://github.com/Front97721/uniapp-tabBarRaised.git
[20200729185141381.gif]: /images/20230208/92142de369bb4405a8472a7ffaff2a26.png
[20200730083057143.gif]: /images/20230208/0f9b034cac1a4382bf1ec9dbdb01f86b.png
[20200730152854529.gif]: /images/20230208/7cc15b6e8ed34820a8d010e79919878e.png
[Link 1]: http://tool.chinaz.com/tools/imgtobase/
[Link 2]: https://uniapp.dcloud.io/api/ui/tabbar?id=ontabbarmidbuttontap
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTc4ODY5MQ_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20230208/6744a43fbd794642a85a1a3976be090c.png