uview组件u

组件u"/>

uview组件u

效果图

在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>