5.6 微信小程序tab-bar badge角标购物车数量角标实现

最新推荐文章于 2024-08-17 14:28:46 发布

牧羊人菜菜

最新推荐文章于 2024-08-17 14:28:46 发布

阅读量604

点赞数 2

文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/weixin_45785694/article/details/138497984

版权

本文探讨了微信小程序中使用原生API实现的tab-bar与自定义tab-bar的优缺点，重点讲述了自定义tab-bar的可控性和更新时机问题，以及解决点击延迟切换的方法，包括在onShow和生命周期钩子里更新数据。

摘要由CSDN通过智能技术生成

1、原生tab-bar

使用原生api，购物车数量变化同步更新。

优点：不用开发

缺点：无法控制样式，只能展示4个字符，超出变成...

wx.setTabBarBadge({
  index: 0,
  text: '1'
})

2、自定义tab-bar

自己写

<view class="tab-bar">
  <view wx:for="{{list}}" wx:key="index" class="tab-bar-item {{selected === index ? 'selected' : ''}}" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="onItemTap" wx:if="{{isLogin}}">
    <image src="{{selected === index ? item.selectedIconPath : item.iconPath}}" class="image" mode=""/>
    <view class="text">{{item.text}}</view>
    <view class="badge" wx:if="{{index === 2 && cartCount > 0}}">{{cartCount > 9999 ? '9999+' : cartCount}}</view>
  </view>
</view>

优点：可控性，自定义样式和逻辑

我自己遇到的一个难点是更新的时机

目前是在每一个tab-bar的页面的onShow的事件中去更新，数量用全局变量保存

onShow() {
    // 更新购物车数量
    if (typeof this.getTabBar === 'function') {
      this.getTabBar().setData({
        cartCount: getApp().globalData.cartTotalCount || 0
      })
    }
  },

一开始觉得每次onShow都要更新，不大好。但是看到官方的自定义tab-bar的实例代码中解决点击两次才能切换tab-bar的方法也是在每个tab-bar页面的onShow上去调用上面的方法来更新自定义tab-bar实例的值，所以也只能接受了，不知道有没有更好的方法。

自定义 tabBar | 微信开放文档

关于上面的点击两次才能正常切换tab-bar(高亮)的解决方法还有一种，通过生命周期来赋值

/**
   * 组件的生命周期
   */
  lifetimes: {
    ready() {
      this.setData({
        selected: ["pages/home/index", "pages/shoppingCart/index", "pages/my/index"].indexOf(getCurrentPages()[0].route)
      })
    }
  },
/**
   * 组件的方法列表
   */
  methods: {
    onItemTap(e) {
      const data = e.currentTarget.dataset
      const url = data.path
      wx.switchTab({
        url
      })
    }
  }