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

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

github: https://github.com/Front97721/uniapp-tabBarRaised.git

先看效果吧！！嘿嘿！！



按需配置隐藏于显示

按平常一样配置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图片地址（转换工具），我尝试了一下用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

参照 官方文档

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是万能的—所有的东西都不是万能，所以相信以后会慢慢实现更多的。