uniapp 自定义tabbar

v3 写法

<template>
	<view class="" v-if="Data.imgurl">
		<view class="tabbars" ref="tabbars" id="tabbars">
			<view class="flex jsa">
				<view class="tabbarc_li" @click="go('/pages/Index/Index')">
					<view class="flex jc" style="margin: auto;">
						<image class="tabbarc_li_icon" :src="Data.imgurl+'tab1c.png'" mode="aspectFit" v-if="index==0">
						</image>
						<image class="tabbarc_li_icon" :src="Data.imgurl+'tab1.png'" mode="aspectFit" v-else></image>
					</view>
					<view class="tabbarc_li_tt" :class="index==0?'tabbarc_li_tt_c':''">
						首页
					</view>
				</view>
				<view class="tabbarc_li" @click="go('/pages/Piazza/Piazza')">
					<view class="flex jc" style="margin: auto;">
						<image class="tabbarc_li_icon" :src="Data.imgurl+'tab2c.png'" mode="aspectFit" v-if="index==1">
						</image>
						<image class="tabbarc_li_icon" :src="Data.imgurl+'tab2.png'" mode="aspectFit" v-else></image>
					</view>
					<view class="tabbarc_li_tt" :class="index==1?'tabbarc_li_tt_c':''">
						广场
					</view>
				</view>
				<view class="tabbarc_li" @click="go('/pages/Store/Store')">
					<view class="flex jc" style="margin: auto;">
						<image class="tabbarc_li_icon" :src="Data.imgurl+'tab3c.png'" mode="aspectFit" v-if="index==2">
						</image>
						<image class="tabbarc_li_icon" :src="Data.imgurl+'tab3.png'" mode="aspectFit" v-else>
						</image>
					</view>
					<view class="tabbarc_li_tt" :class="index==2?'tabbarc_li_tt_c':''">
						店铺
					</view>
				</view>
				<view class="tabbarc_li" @click="go('/pages/Message/Message')">
					<view class="flex jc" style="margin: auto;position: relative;" >
						<!-- :class="item.num*1<10?'num1':'num10'" v-if="item.num" -->
						<view class="num num1">
							{{2}}
						</view>
						<image class="tabbarc_li_icon" :src="Data.imgurl+'messagesc.png'" mode="aspectFit"
							v-if="index==3">
						</image>
						<image class="tabbarc_li_icon" :src="Data.imgurl+'messages.png'" mode="aspectFit" v-else>
						</image>
					</view>
					<view class="tabbarc_li_tt" :class="index==3?'tabbarc_li_tt_c':''">
						消息
					</view>
				</view>
				<!-- 	<view class="diy_function" @click="go('/pages/releasemassage/releasemsg')">
					<view class="diy_function_li flex jc ac">
						<view class="diy_function_li_li flex jc ac">
							<u-icon name="plus" color="#ffffff" size="20"></u-icon>
						</view>
					</view>
				</view> -->
				<view class="tabbarc_li" @click="go('/pages/User/User')">
					<view class="flex jc" style="margin: auto;">
						<image class="tabbarc_li_icon" :src="Data.imgurl+'tab4c.png'" mode="aspectFit" v-if="index==4">
						</image>
						<image class="tabbarc_li_icon" :src="Data.imgurl+'tab4.png'" mode="aspectFit" v-else></image>
					</view>
					<view class="tabbarc_li_tt" :class="index==4?'tabbarc_li_tt_c':''">
						我的
					</view>
				</view>
			</view>
		</view>
		<view class="" :style="{width:'100%',height:tabbarHeightss+'px'  }" v-if="isplank">

		</view>


	</view>

</template>

<script setup>
	import tools from "@/tools/index.js"
	import publicfun from '@/tools/utils/public.js'
	import config from "@/tools/config.js"
	import {
		reactive,

		computed,
		watch,
		nextTick,
		getCurrentInstance
	} from 'vue';
	import {
		onLoad,
		onPageScroll,
		onPullDownRefresh,
		onShow,
		onReady,
		onReachBottom,
		onUnload,
		onHide,
		onShareAppMessage
	} from '@dcloudio/uni-app';

	const Data = reactive({
		tabbarHeights: 0,
		imgurl: config.serverimg,
	})

	const tabbarHeightss = computed(() => tools.$store('public').tabbarHeights)


	const instance = getCurrentInstance();

	const porps = defineProps({
		index: {
			default: 0,
			type: Number
		},
		isplank: {
			type: Boolean,
			default: false
		}
	})


	//初始化当前tabbar的高度
	onReady(() => {
		if (!tabbarHeightss.value) {
			nextTick(() => {
				uni.createSelectorQuery().in(instance).select(".tabbars").boundingClientRect(data => {
                    //这里是存储到vuex 里面了
					tools.$store('public').tabbarHeights = data.height;
					// console.log(Data.tabbarHeights, '这是数据')
				}).exec()
			})
		}
	})


	watch(() => porps.index, (newv, oldv) => {
		console.log(newv, oldv)
		// console.log()
	}, {
		deep: true,
		immediate: true
	})

	const go = (page) => {
		// console.log(page);
		publicfun.reLaunch(page)
		return
		if (page == '/pages/user/user') {
			publicfun.reLaunch(page, 1)
		} else {
			publicfun.reLaunch(page)
		}
	}
</script>

<style lang="scss">
	.u-page__item__slot-icon {
		width: 40rpx;
		height: 40rpx;
	}
	
	
	.num {
		box-sizing: border-box;
		font-size: 24rpx;
		color: #fff;
		position: absolute;
		right: -20rpx;
		top: -15rpx;
		background: #FA5151;
		border-radius: 999%;
		z-index: 8;
	}
	
	.num1 {
		padding: 5rpx 15rpx !important;
	}
	
	.num10 {
	
		padding: 5rpx 7rpx !important;
	
	}

	.tabbars {
		z-index: 9999999;
		position: fixed;
		bottom: 0;
		left: 0;
		padding: 20rpx 30rpx 20rpx 30rpx;
		box-sizing: border-box;
		width: 750rpx;
		// height: 68rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		box-shadow: 0rpx -8rpx 16rpx 0rpx rgba(175, 175, 175, 0.16);

		.diy_function {
			width: 124rpx;
			height: 110rpx;
			background: #FFFFFF;
			position: relative;

			.diy_function_li {
				position: absolute;
				top: -65rpx;
				left: 0rpx;
				width: 100%;
				height: 100%;
				border-radius: 999rpx;
				background: #FFFFFF;

				.diy_function_li_li {
					width: 100rpx;
					height: 100rpx;
					background: #3272EE;
					border-radius: 999rpx;
				}
			}
		}

		.tabbarc_li {
			height: 98rpx;
			text-align: center;

			.tabbarc_li_icon {
				width: 52rpx;
				height: 52rpx;
			}

			.tabbarc_li_tt {
				font-size: 22rpx;
				color: #AFB2B1;
				text-align: center;
				margin-top: 8rpx;
			}

			.tabbarc_li_tt_c {
				color: #8E97FE;
			}
		}
	}
</style>