效果图
在slot插槽中,使用v-if指令来判断当前选项卡是否是当前激活的选项卡(即index是否等于currentTab),以及徽标数是否大于0。
<view><u-tabs:list="listTab" //标题数据:is-scroll="false":current="currentTab" //下标@change="changeTab" //事件count="badgeCount" //消息数字><template v-slot:tabItem="{ tab, index }"><span>{{ tab.name }}</span><sup v-if="index === currentTab && badgeCount > 0">{{badgeCount}}</sup></template></u-tabs>
</view>
<script>
export default {data() {return {listTab: [{name: "待收货",badgeCount: 0,},{name: "待付款",badgeCount: 0,},{name: "待评价",badgeCount: 0,}],currentTab: 0,};},methods: {queryCustomNum() {queryCustomNum().then((res) => {console.log(res);const readyReceivedNum = res.data.readyReceivedNum;this.listTab[0].badgeCount = readyReceivedNum;const obligationNum = res.data.obligationNum;this.listTab[1].badgeCount = obligationNum;const treatNum = res.data.treatNum;this.listTab[2].badgeCount = treatNum;});},
}
</script>