uniapp 微信小程序开发时，需要底部中间实现凸起按钮效果。将实现代码记录一下，留待复用。

使用实例

uniapp 微信小程序 案例 遇见美家美户

引用

<footerBarSync :active.sync="footerActive"></footerBarSync>

代码

<template>
	<view class="tab-bar-body">
		<view class="tab-bar">
			<view v-for="(item,index) in list" :key="index" class="tab-bar-item" @click="getactive(item.active)">
				<div class="tab-bar-item-icon">
					<image :style="{width:item.iconWidth+'rpx',height:item.iconHeight+'rpx'}"
						:src="active==item.active?item.selectedIconPath:item.iconPath" />
				</div>
				<text
					:style="{'fontSize':fontSize+'rpx','color':active==item.active?selectedcolor:SizeColor}">{{item.title}}</text>
			</view>
			<view class="tab-bar-item footerCenter">
				<div class="releaseBut">
					<div class="release">
						<u-icon name="plus" color="#fff"></u-icon>
					</div>
				</div>
				<text>发布</text>
				</div>
			</view>
			<view v-for="(item,index) in list2" :key="index" class="tab-bar-item" @click="getactive(item.active)">
				<div class="tab-bar-item-icon">
					<image :style="{width:item.iconWidth+'rpx',height:item.iconHeight+'rpx'}"
						:src="active==item.active?item.selectedIconPath:item.iconPath" />
				</div>
				<text
					:style="{'fontSize':fontSize+'rpx','color':active==item.active?selectedcolor:SizeColor}">{{item.title}}</text>
				</div>
			</view>
			<div class="safe-area"></div>
		</view>
	</view>
</template>
<script>
	export default {
		name: "tabs",
		components: {},
		data() {
			return {
				selectedcolor: '#EF4034',
				SizeColor: '#A1A1A1',
				fontSize: 20,
				type: 0,
				list: [{
					"title": "首页",
					"iconPath": 'https://images.wanjunshijie.com/mini/yujian/static/footer/home.png',
					"selectedIconPath": 'https://images.wanjunshijie.com/mini/yujian/static/footer/home_active.png',
					"active": 0,
					"iconHeight": 39,
					"iconWidth": 39,
				}, {
					"title": "转卖",
					"iconPath": 'https://images.wanjunshijie.com/mini/yujian/static/community/footer/icon2.png',
					"selectedIconPath": 'https://images.wanjunshijie.com/mini/yujian/static/community/footer/icon2_active.png',
					"active": 1,
					"iconHeight": 39,
					"iconWidth": 39,
				}],
				list2: [{
					"title": "赠送",
					"iconPath": 'https://images.wanjunshijie.com/mini/yujian/static/community/footer/icon3.png',
					"selectedIconPath": 'https://images.wanjunshijie.com/mini/yujian/static/community/footer/icon3_active.png',
					"active": 2,
					"iconHeight": 39,
					"iconWidth": 39,
				}, {
					"title": "我的",
					"iconPath": 'https://images.wanjunshijie.com/mini/yujian/static/community/footer/icon4.png',
					"selectedIconPath": 'https://images.wanjunshijie.com/mini/yujian/static/community/footer/icon4_active.png',
					"active": 3,
					"iconHeight": 39,
					"iconWidth": 39,
				}],
			}
		},
		props: {
			active: {
				type: Number,
				default () {
					return 0;
				}
			},
		},
		watch: {},
		mounted() {},
		methods: {
			getactive(e) {
				this.$emit("update:active", e)
			},
		}
	}
</script>

<style scoped lang="scss">
	.tab-bar {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: nowrap;
		flex-direction: row;
		width: 750rpx;
		padding-top: 15rpx;

		.tab-bar-item {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-wrap: nowrap;
			position: relative;
			flex-direction: column;
			width: 25%;

			.tab-bar-item-icon {
				display: flex;
				justify-content: center;
				align-items: center;
				flex-wrap: nowrap;
				flex-direction: row;
				height: 60rpx;
				width: 90rpx;
			}
		}
	}

	.safe-area {
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}

	.tab-bar-body {
		position: fixed;
		z-index: 1000;
		left: 0;
		width: 750rpx;
		border-top: 1px solid rgba(249, 249, 249, 1.00);
		bottom: 0rpx;
		background: #fff;
		height: 160rpx;
		display: flex;
		justify-content: center;
		align-items: flex-start;
		flex-wrap: nowrap;
		flex-direction: row;
	}

	.footerCenter {
		font-family: PingFangSC-Regular;
		font-size: 20rpx;
		color: #A1A1A1;
		letter-spacing: -0px;
		text-align: center;
		font-weight: 400;
	}

	.release {
		width: 62rpx;
		height: 62rpx;
		background: #F35749;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: nowrap;
		flex-direction: row;
		align-content: flex-start;
		border-radius: 50%;
	}

	.releaseBut {
		width: 90rpx;
		height: 90rpx;
		background: #FFFFFF;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: nowrap;
		flex-direction: row;
		align-content: flex-start;
		margin-top: -60rpx;
		border-top: 2rpx solid rgba(229, 229, 229, 1.00);
		border-left: 2rpx solid rgba(246, 246, 246, 1.00);
		border-right: 2rpx solid rgba(246, 246, 246, 1.00);
		border-radius: 50%;
		margin-bottom: 20rpx;
	}
</style>