uniapp开发底部自定义组件。

<template>
	<view class="tab-bar-body">
		<view class="tab-bar">
			<view v-if="type==0" 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 v-if="type==1" v-for="(item,index) in list3" :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>
			<div class="raised">
				<image class="release" src="../../static/footer/release.png" mode="widthFix"></image>
				<text>发任务</text>
			</div>
			<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>
			</view>
		</view>
		<!-- <div class="safe-area"></div> -->
	</view>
</template>
<script>
	import icon_home_hover from '../../static/footer/icon_home_hover.png'
	import icon_home from '../../static/footer/icon_home.png'
	import icon_task from '../../static/footer/icon_task.png'
	import icon_task_hover from '../../static/footer/icon_task_hover.png'
	import icon_findPeople_hover from '../../static/footer/icon_findPeople_hover.png'
	import icon_zhaoren from '../../static/footer/icon_zhaoren.png'
	import icon_user from '../../static/footer/icon_user.png'
	import icon_message from '../../static/footer/icon_message.png'
	import icon_message_hover from '../../static/footer/icon_message_hover.png'
	import icon_user_hover from '../../static/footer/icon_user_hover.png'
	export default {
		name: "tabs",
		components: {},
		data() {
			return {
				selectedcolor: 'rgba(255, 164, 0, 1)',
				SizeColor: 'rgba(125, 125, 125, 1)',
				iconWidth: 52,
				iconHeight: 52,
				fontSize: 24,
				type: 0,
				list: [{
					"title": "首页",
					"iconPath": icon_home,
					"selectedIconPath": icon_home_hover,
					"active": 0,
					"iconWidth": 56,
					"iconHeight": 56,
				}, {
					"title": "找人",
					"iconPath": icon_zhaoren,
					"selectedIconPath": icon_findPeople_hover,
					"active": 1,
					"iconWidth": 56,
					"iconHeight": 56,
				}],
				list3: [{
					"title": "首页",
					"iconPath": icon_home,
					"selectedIconPath": icon_home_hover,
					"active": 0,
					"iconWidth": 56,
					"iconHeight": 56,
				}, {
					"title": "任务",
					"iconPath": icon_zhaoren,
					"selectedIconPath": icon_findPeople_hover,
					"active": 4,
					"iconWidth": 56,
					"iconHeight": 56,
				}],
				list2: [{
					"title": "消息",
					"iconPath": icon_message,
					"selectedIconPath": icon_message_hover,
					"active": 2,
					"iconWidth": 56,
					"iconHeight": 56,
				}, {
					"title": "我的",
					"iconPath": icon_user,
					"selectedIconPath": icon_user_hover,
					"active": 3,
					"iconWidth": 44,
					"iconHeight": 50,
				}]
			}
		},
		props: {
			active: {
				type: Number,
				default () {
					return 0;
				}
			}
		},
		watch: {},
		mounted() {},
		methods: {
			getactive(e) {
				if (e == 4) {
					this.gofabu()
				} else {
					// this.active = e
					this.$emit('getactive', e)
				}
			},
			gofabu() {
				uni.navigateTo({
					url: '/pages/identity/identity'
				})
			}
		}
	}
</script>

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

		.tab-bar-item {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-wrap: nowrap;
			flex-direction: column;
			flex: 1;

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

	.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;
		bottom: -5rpx;
		background: url(../../static/footer/footerbg.png) no-repeat;
		background-size: 750rpx 204rpx;
		height: 204rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: nowrap;
		flex-direction: row;
	}

	.raised {
		width: 104rpx;
		height: 104rpx;
		background: #2563E9;
		opacity: 1;
		border: 1rpx solid #2563E9;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: nowrap;
		flex-direction: column;
		border-radius: 50%;
		margin-top: -80rpx;

		.release {
			width: 37rpx;
			height: 37rpx;
		}

		text {
			font-size: 24rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
		}
	}
</style>