sugarpark-mini-program/components/TabBar/TabBar.vue

<template>
	<cover-view id="tabbar" class="tabbar" >
		<cover-view class="tabs flex-between" :style="{'padding-bottom':`${safeArea?'68rpx':'20rpx'}`}">
			<cover-view class="item flex-center" @click="switchTab(0)">
				<cover-image :src="`${assetsUrl}tabbar-friends-${tabIndex===0?'on':'off'}.png`" mode="aspectFill" class="tab-img"></cover-image>
				<cover-view class="tab-text font22 fw400" :class="tabIndex===0?'tab-text-active':''">
					交友
				</cover-view>
			</cover-view>
			<cover-view class="item flex-center" @click="switchTab(1)">
				<cover-image :src="`${assetsUrl}tabbar-message-${tabIndex===1?'on':'off'}.png`" mode="aspectFill" class="tab-img"></cover-image>
				<cover-view class="tab-text font22 fw400" :class="tabIndex===1?'tab-text-active':''">
					消息
				</cover-view>
			</cover-view>
			<cover-view class="item flex-center" @click="switchTab(2)">
				<cover-image :src="`${assetsUrl}tabbar-mine-${tabIndex===2?'on':'off'}.png`" mode="aspectFill" class="tab-img"></cover-image>
				<cover-view class="tab-text font22 fw400" :class="tabIndex===2?'tab-text-active':''">
					我的
				</cover-view>
			</cover-view>
		</cover-view>
	</cover-view>
</template>

<script>
	import {hasSafeArea} from '../../util/index.js'
	export default {
		name:"TabBar",
		props:{
			tabIndex:{
				type:Number,
				default:0
			}
		},
		data() {
			return {
				assetsUrl:this.$util.assetsUrl,
				safeArea:this.$util.hasSafeArea(),
				list:[ 
					{
						pagePath: "/pages/friends/friends",
						text: "交友"
					},
					{
						pagePath: "/pages/messages/messages",
						text: "消息"
					},
					{
						pagePath: "/pages/mine/mine",
						text: "我的"
					}
				],
			};
		},
		mounted() {
			
		},
		methods:{
			switchTab(index){
				console.log(index)
				uni.switchTab({
					url:this.list[index].pagePath
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tabbar{
		width: 100vw;
		position: fixed;
		bottom: 0;
		left: 0;
		padding: 0 44rpx;
		box-sizing: border-box;
		background-color: $bgcolor1;
		z-index: 0;
		.tabs{
			.item{
				flex: 1;
				flex-direction: column;
				.tab-img{
					width: 72rpx;
					height: 72rpx;
				}
				.tab-text{
					color: $fontcolor2;
					text-align: center;
				}
				.tab-text-active{
					color: $fontcolor5 !important;
				}
			}
			.add{
				width: 96rpx;
				height: 72rpx;
				background: linear-gradient(133deg, #7F5CFA 0%, #654AFE 100%);
				border-radius: 32rpx;
				.add-img{
					width: 96rpx;
					height: 72rpx;
				}
			}
		}
	}

</style>