uview组件u-tabs添加badge数字消息提醒

最新推荐文章于 2025-03-01 11:48:27 发布

桔子喔

最新推荐文章于 2025-03-01 11:48:27 发布

阅读量1.6k

点赞数 1

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/m0_60153106/article/details/134266351

版权

文章描述了如何在Vue组件的slot插槽中使用v-if指令，根据当前激活的选项卡索引和徽标数进行动态显示。通过`u-tabs`组件，结合数据绑定和API调用，实现在不同选项卡上显示相应的消息计数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图

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