本文主要是介绍uview组件u-tabs添加badge数字消息提醒，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
效果图
在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>这篇关于uview组件u-tabs添加badge数字消息提醒的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
