tabbar-badge.js 768 B

1234567891011121314151617181920212223242526272829303132333435363738
  1. import {mapState} from 'vuex'
  2. export default {
  3. computed: {
  4. ...mapState('m_user', ['userinfo'])
  5. },
  6. data() {
  7. },
  8. watch: {
  9. // 监听 count 值的变化
  10. 'userinfo.count': {
  11. handler() {
  12. // 调用 methods 中的 setBadge 方法,重新为 tabBar 的数字徽章赋值
  13. this.setBadge()
  14. }
  15. },
  16. },
  17. onShow() {
  18. // 在页面刚展示的时候,设置数字徽标
  19. this.setBadge()
  20. },
  21. methods: {
  22. setBadge() {
  23. if (this.userinfo.count == 0) {
  24. uni.removeTabBarBadge({
  25. index: 2
  26. })
  27. } else {
  28. // 调用 uni.setTabBarBadge() 方法,为购物车设置右上角的徽标
  29. uni.setTabBarBadge({
  30. index: 2,
  31. text: this.userinfo.count + '', // 注意:text 的值必须是字符串,不能是数字
  32. })
  33. }
  34. }
  35. }
  36. }