uniapp对tabbar封装，简单好用

embedded/2024/9/23 9:06:49/

第一种，效果展示

上代码，新建一个公用组件，tabbar.vue

<template><view class="tabbar"><view class="tabbar-item" @click="tabbarbtn(0)"><image class="item-image" v-if="value==0"  src="@/static/icon1.png" image><image class="item-image" v-else src="@/static/icon5.png" ></image><text :class="['item-text',value==0?'active':'']">微信</text></view><view class="tabbar-item" @click="tabbarbtn(1)"><image class="item-image" v-if="value==1" src="@/static/icon2.png" mode=""></image><image class="item-image" v-else src="@/static/icon6.png" mode=""></image><text :class="['item-text',value==1?'active':'']">通讯录</text></view><!-- 购物车没有数量情况 --><!-- <view class="tabbar-item" @click="tabbarbtn(2)"><image class="item-image" v-if="value==2"  src="@/static/icon3.png" mode=""></image><image class="item-image" v-else src="@/static/icon7.png" mode=""></image><text :class="['item-text',value==2?'active':'']">发现</text></view> --><!-- 购物车有数量情况 --><view class="tabbar-item" @click="tabbarbtn(2)"><view class="item-view"><image class="item-image" v-if="value==2"  src="@/static/icon3.png" mode=""></image><image class="item-image" v-else src="@/static/icon7.png" mode=""></image><view class="item-num">{{num}}</view></view><text :class="['item-text',value==2?'active':'']">发现</text></view><view class="tabbar-item" @click="tabbarbtn(3)"><image class="item-image" v-if="value==3"  src="@/static/icon4.png" mode=""></image><image class="item-image" v-else   src="@/static/icon8.png" mode=""></image><text :class="['item-text',value==3?'active':'']">我的</text></view></view>
</template><script>export default {name: "tabbar",data() {return {num:2,value:this.vlue,list: [{path: "pages/index/home"},{path: "pages/index/login"},{path: "pages/index/cartpage"},{path: "pages/index/personage"},],};},props:{vlue:{type: Number,}},methods:{tabbarbtn(index){uni.switchTab({url: '/' + this.list[index].path,})}}}
</script><style lang="scss" scoped>.tabbar {position: fixed;left: 0;bottom: 0;width: 100%;// 苹果手机下边有小黑条的安全距离padding-bottom: env(safe-area-inset-bottom);background-color: #fff;box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(0,0,0,0.1);display: flex;align-items: center;.tabbar-item {padding:35rpx 0 15rpx;flex: 1;display: flex;flex-direction: column;justify-content: center;align-items: center;.item-view{position: relative;.item-num{position: absolute;right:-85%;top:-40%;font-size:20rpx;color: #fff;border-radius: 20rpx;padding: 5rpx 15rpx;background-color: red;}}.item-image{display: block;width: 50rpx;height: 50rpx;}.item-text{margin-top: 4rpx;font-size: 24rpx;color: #666666;}.active{color: #d81e06;}}}
</style>

在pages.json中要tabbar里的页面路径