uniapp tabbar中间按钮突起

需求：最近出了一个APP的ui图，其中tabbar的中间按钮是凸出来的。

解决：为了解决这个中间按钮突出，我尝试了两种方法，两种方法都不太好用。后续看怎么自定义tabbar吧...

方法一：使用uniapp自带的midButton，

缺点：只能为midButton配置跳转的页面为非tabbar页面，否则就不显示中间凸起按钮。

示例图如下：

video

步骤如下：

一、在pages.json中配置好midButton和其他页面

二、跳转的页面在app.vue中使用监听点击事件，调用API：uni.onTabBarMidButtonTap

代码：

pages.json：

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/my/my",
			"style": {
				"navigationBarTitleText": "",
				"enablePullDownRefresh": false
			}

		}, {
			"path": "pages/home/home",
			"style": {
				"navigationBarTitleText": "",
				"enablePullDownRefresh": false
			}

		}
	],
	"tabBar": {
		"color": "#7A7E83",
		"selectedColor": "#3cc51f",
		"backgroundColor": "#ffffff",

		"list": [{
			"pagePath": "pages/home/home",
			"iconPath": "./static/tabbar/home.png",
			"selectedIconPath": "./static/tabbar/homeing.png",
			"text": "首页"
		}, {
			"pagePath": "pages/my/my",
			"iconPath": "./static/tabbar/my.png",
			"selectedIconPath": "./static/tabbar/mying.png",
			"text": "我的"
		}],
		"midButton": {
			"width": "80px",
			"height": "76px",
			"backgroundImage": "./static/tabbar/index.png"
		}

	},
	"subPackages": [{
		"root": "subpkg",
		"pages": [{
			"path": "second/second",
			"style": {
				"navigationBarTitleText": "",
				"enablePullDownRefresh": false
			}

		}]
	}],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	},
	"uniIdRouter": {}
}

APP.vue：

<script>
	export default {
		onLaunch: function() {
			// console.log('App Launch')
			/* #ifdef APP-PLUS */
			uni.onTabBarMidButtonTap(() => {
				uni.navigateTo({
					url: '/subpkg/second/second',
				});
			})
			/* #endif */
		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		}
	}
</script>

<style>
	/*每个页面公共css */
</style>

注意：

不能跳转tabbar，只能用uni.navigateTo！！

pages.json不要配置错了，list里面要是偶数

方法二：按需配置控制显示与隐藏，

参考文献：

uniapp 实现tabBar图标凸起的两种方式（App端）_小程序tabbar中间凸起_Front思的博客-CSDN博客插件市场：底部导航栏凸起按钮 - DCloud 插件市场

github: GitHub - Front97721/uniapp-tabBarRaised: uniapp 实现tabBar图标凸起的两种方式（App端）

个人感受：

其一是跳转到分包的二级页面，控制隐藏的方法不生效，要在pages里面的页面才可以生效。

其二是跳转的时候可以看到按钮下的原本的tabbar的icon图。

因为这个是借鉴别人的代码实现的，这个隐藏方法还是需要自己去琢磨了。

示例图如下：

​

​

步骤如下：

一、先到page.json中正常配置tabbar，就和写普通的tabbar一样

二、在所有的tabbar页面中写上创建显示这个中间按钮以及点击它的跳转代码

三、在其他不需要显示tabbar的页面隐藏该按钮

代码：

创建显示

shop.index，home.index，my.index三个tabbar页面中：

<template>
	<view class="content">
	</view>
</template>

<script>
// 第一步
	var bitmap = null;
	export default {
		data() {
			return {
			}
		},
		onShow() {
			// 第二步
			var icon = plus.nativeObj.View.getViewById("icon");
			if (icon) {
				setTimeout(function() {
					icon.show();
				}, 100)
			}
		},
		onLoad() {
			// 第三步
			bitmap = new plus.nativeObj.Bitmap('bmp1');
			bitmap.loadBase64Data(
				'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASAAAAEQCAYAAAAQ+aktAA......',
				function() {},
				function(e) {});
				// 第五步
			this.createtab();
		},
		methods: {
			// 第四步
			createtab: function() {
				// 设置水平居中位置
				var leftPos = Math.ceil((plus.screen.resolutionWidth - 60) / 2);
				var view = new plus.nativeObj.View('icon', {
					bottom: '2px',
					left: leftPos - 7 + 'px',
					width: '78px',
					height: '72px'
				});
				view.drawBitmap(bitmap, {
					tag: 'font',
					id: 'icon',
					src: '/static/tabbar/home/home.png',
					position: {
						top: '0px',
						left: '5px',
						width: '50px',
						height: '100%'
					}
				});
				view.addEventListener("click", function(e) {
					uni.switchTab({
						url: '/pages/home/home'
					})
				}, false);
				view.show();
			}


		}

	}
</script>

<style lang="scss">

</style>

隐藏

在需要隐藏tabbar的其他页面：（分包用时无法隐藏，需时在pages文件夹内的页面才可以隐藏按钮，如果有好的解决可以私信或评论，谢谢！）

onShow() {
			// 第二步
			var icon = plus.nativeObj.View.getViewById("icon");
			if (icon) {
				setTimeout(function() {
					icon.hide();
				}, 100)
			}
},

如果其他页面是在pages里面的，如下：

​

在index_page中使用隐藏的方法时，是可以起作用的