uniapp tababr凸出图标已经自定义tabbar

uniapp关于tabbar的文档

现在我想tabbar中间的显示为凸出的图标，类似下图

1. 只需要在app中使用，不用兼容小程序的话，可以使用官方的midButton配置项，该配置项不兼容各种小程序。
   

"midButton": {
		       "height": "70px", //修改距离底下的高度 
		       "iconWidth": "50px", // 缩放图片大小 自己调整 
		       "iconPath": "static/33cd2904c1d0e00cce947d9248eee4a.png",
		       "selectedIconPath": "static/5x471a3cb9de2330f0d7ee72547772bd7.png",
		       "text": "开单"
},

2. 另一种方法，可以使用uniapp的组件，类于m-tabbar直接导入到项目中，进行使用，可以根据自身需求改变其中样式 【该组件，需请在page.json中tabbarde list添加全部tabbar】

<m-tabbar native :beforeChange="onBeforeChange">
			<template v-slot:tabbar_index_2>
				<view class="custom_style">
					<view class="custom_style_icon">
						+
					</view>
					<view class="custom_style_text">下单</view>
				</view>
			</template>
		</m-tabbar>
		

methods: {
			onBeforeChange(next) {
				next()
				uni.showModal({
					title: '非法进入',
				content: '您正在非法进入其他页面,是否继续',
				success: function (res) {
					if (res.confirm) {
						next()
						} else if (res.cancel) {
						console.log('用户点击取消');
				 		}
				}
				// })
			}
		}

对应写上样式，根据需求进行修改路由守卫。可以将该组件进行重新封装。
封装代码如下：

<template name="zxd-tabbar">
	<view>
		<m-tabbar native :beforeChange="onBeforeChange">
			<template v-slot:tabbar_index_2>
				<view class="custom_style">
					<view class="custom_style_icon">
						+
						<!-- <image src="/static/bro_union_plus.png" mode=""></image> -->
					</view>
					<view class="custom_style_text">下单</view>
				</view>
			</template>
		</m-tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {}
		},
		onLoad() {
		},
		methods: {
			onBeforeChange(next) {
				next()
				// uni.showModal({
				// 	title: '非法进入',
				// 	content: '您正在非法进入其他页面,是否继续',
				// 	success: function (res) {
				// 		if (res.confirm) {
				// 			next()
				// 		} else if (res.cancel) {
				// 			console.log('用户点击取消');
				// 		}
				// 	}
				// })
			}
		}
	}
</script>

<style lang="less" scoped>
	@ThemeColor: #3cc4e0;

	.custom_style {
		color: #aaa;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: 24upx;
		gap: 10upx;

		.custom_style_icon {
			background-color: @ThemeColor;

			color: #fff;
			font-size: 80rpx;
			width: 90upx;
			height: 90upx;
			border-radius: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: -40upx;

		}

		.custom_style_text {
			// background-color: @ThemeColor;
			// font-size: 28rpx;
			// width: 120rpx;
			// height: 120rpx;
			border-radius: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			// margin-top: -40rpx;
		}
	}
</style>

在各个主页面最后进行引用该组件，进行使用

<zxd-tabbar></zxd-tabbar>

3. 或者进行自定义组件【该组件在页面中进行引用，需计算tabbar的高度，尤其是含有列表滚动的页面】 封装组件如下：

<template>
	<view class="tabbar-container">
		<block>
			<view class="tabbar-item" v-for="(item, index) in tabbarList"
				:class="[item.centerItem ? ' center-item' : '']" @click="changeItem(item)">
				<view class="item-top">
					<text v-if="item.centerItem">+</text>
					<image :src="currentItem == item.id ? item.selectedIconPath : item.iconPath" v-else></image>
				</view>
				<view class="item-bottom" :class="[currentItem == item.id ? 'item-active' : '']">
					<text>{{ item.text }}</text>
				</view>
			</view>
		</block>
	</view>
</template>

<script>
	export default {
		props: {
			currentPage: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				currentItem: 0,
				tabbarList: [{
						id: 0,
						pagePath: "/pages/tabbar/order/order",
						iconPath: "/static/ic_order_in.png",
						selectedIconPath: "/static/ic_order_on.png",
						text: "我发的",
						centerItem: false
					},
					{
						id: 1,
						pagePath: "/pages/tabbar/received/received",
						iconPath: "/static/ic_received_in.png",
						selectedIconPath: "/static/ic_received_on.png",
						text: "我收的",
						centerItem: false
					},
					{
						id: 2,
						pagePath: "/pages/order/orderWrite/orderWrite",
						iconPath: "/static/ic_main_in.png",
						selectedIconPath: "/static/ic_main_on.png",
						text: "开单",
						centerItem: true
					},
					{
						id: 3,
						pagePath: "/pages/tabbar/news/news",
						iconPath: "/static/ic_news_in.png",
						selectedIconPath: "/static/ic_news_on.png",
						text: "新闻",
						centerItem: false
					},
					{
						id: 4,
						pagePath: "/pages/tabbar/main/main",
						iconPath: "/static/ic_main_in.png",
						selectedIconPath: "/static/ic_main_on.png",
						text: "我的",
						centerItem: false
					}
				]
			};
		},
		mounted() {
			this.currentItem = this.currentPage;
			uni.hideTabBar();
		},
		methods: {
			changeItem(item) {
				let _this = this;
				// console.log(item)
				if (item.id == 2) {  //通过不同的路径进行跳转，并没有把这个页面写在tarbar中
					uni.navigateTo({
						url: '/pages/order/orderWrite/orderWrite'
					})
					return
				}
				// _this.currentItem = item.id;
				uni.switchTab({
					url: item.pagePath
				});
			}
		}
	};
</script>
<style lang='less'>
	@ThemeColor: #3cc4e0;

	view {
		padding: 0;
		margin: 0;
		box-sizing: border-box;
	}

	.tabbar-container {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 110rpx;
		box-shadow: 0 0 5px #999;
		display: flex;
		align-items: center;
		padding: 5rpx 0;
		color: #999999;
	}

	.tabbar-container .tabbar-item {
		width: 20%;
		height: 100rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		text-align: center;
	}

	.tabbar-container .item-active {
		color: #3cc4e0;
	}

	.tabbar-container .center-item {
		display: block;
		position: relative;
	}

	.tabbar-container .tabbar-item .item-top {
		width: 70rpx;
		height: 70rpx;
		padding: 10rpx;
	}

	.tabbar-container .center-item .item-top {
		flex-shrink: 0;
		width: 100rpx;
		height: 100rpx;
		position: absolute;
		top: -50rpx;
		left: calc(50% - 50rpx);
		border-radius: 50%;
		box-shadow: 0 0 5px #999;
		background-color: #ffffff;

		display: flex;
		align-items: center;
		justify-content: center;
	}

	.tabbar-container .tabbar-item .item-top image {
		width: 100%;
		height: 100%;
	}

	.tabbar-container .tabbar-item .item-top text {
		color: #3cc4e0;
		font-size: 90upx;
	}

	.tabbar-container .tabbar-item .item-bottom {
		font-size: 28rpx;
		width: 100%;
	}

	.tabbar-container .center-item .item-bottom {
		position: absolute;
		bottom: 5rpx;
	}
</style>

在页面中使用如下，需要传对应的currentPage值，不然会出现点击闪烁的问题

<zxd-tabbar :currentPage='0'></zxd-tabbar>