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)returnif (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>