tabbar顯示購物車數量——微信小程序中自定義tabbar的一些坑

效果如圖，使用原生的方式為tabbar加上購物車數量

在此處查看微信文檔的自定義tabbar

建議在開發者工具中預覽效果

首先在app.json中的tabBar項中加入配置： "custom": true

然后加上 "usingComponents": {}

在加上其他各項配置，這是我的app.json可用以參考

{
  "pages": [
    "pages/index/index",
    "pages/category/index",
    "pages/shoppingCar/index",
    "pages/my/index",
    "pages/goodlist/goodlist",
    "pages/search/index",
    "pages/goodsdetail/index",
    "pages/orderconfirm/index",
    "pages/authorize/index"
  ],
  "window": {
    "backgroundTextStyle": "dark",
    "navigationBarBackgroundColor": "#ff2d4a",
    "navigationBarTitleText": "我的小程序",
    "navigationBarTextStyle": "white",
    "enablePullDownRefresh": true
  },
  "tabBar":{
    "custom": true,
     "color": "#7A7E83",
    "selectedColor": "#ff0000",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首頁",
        "iconPath": "./images/[e-mail]",
        "selectedIconPath": "./images/[e-mail]"
      },
      {
        "pagePath": "pages/category/index",
        "text": "分頁",
        "iconPath": "./images/[e-mail]",
        "selectedIconPath": "./images/[e-mail]"
      },
      {
        "pagePath": "pages/shoppingCar/index",
        "text": "購物車",
        "iconPath": "./images/[e-mail]",
        "selectedIconPath": "./images/[e-mail]"
      },
      {
        "pagePath": "pages/my/index",
        "text": "我的",
        "iconPath": "./images/[e-mail]",
        "selectedIconPath": "./images/[e-mail]"
      }
    ]
  },
  "usingComponents": {},
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

接下來在根目錄創建custom-tab-bar文件夾（或者實例中的所有代碼考過來）

先完成頁面與按鈕的對應的配置使得tabbar能夠點擊跳轉

更改custom-tab-bar先index.js中的list配置如下(與app.json對應)

注意注意，此處路徑不可寫 ./而是要根目錄的/否則會報錯

Component({
 
  data: {
    selected: 1,
    color: "#7A7E83",
    selectedColor: "#ff0000",
    list: [
      {
        pagePath: "/pages/index/index",
        text: "首頁",
        iconPath: "/images/[e-mail]",
        selectedIconPath: "/images/[e-mail]"
      },
      {
        pagePath: "/pages/category/index",
        text: "分頁",
        iconPath: "/images/[e-mail]",
        selectedIconPath: "/images/[e-mail]"
      },
      {
        pagePath: "/pages/shoppingCar/index",
        text: "購物車",
        iconPath: "/images/[e-mail]",
        selectedIconPath: "/images/[e-mail]"
      },
      {
        pagePath: "/pages/my/index",
        text: "我的",
        iconPath: "/images/[e-mail]",
        selectedIconPath: "/images/[e-mail]"
      }
    ],
    shopping_count: (wx.getStorageSync('shopping_car') || [] ).length
  },
  methods: {
    switchTab(e) {
      const data = e.currentTarget.dataset
      const url = data.path
      wx.switchTab({url})
      this.setData({
        selected: data.index
      })
    }
  }
  

})

接下來在每個對應的頁面寫上如下代碼

其中selected為索引值，至此完成自定義tabbar的配置

onShow() {
    if (typeof this.getTabBar === 'function' &&
      this.getTabBar()) {
      this.getTabBar().setData({
        selected: 0
      })
    }
  }

接下來為購物車添加圖標

<!--miniprogram/custom-tab-bar/index.wxml-->
<cover-view class="tab-bar">
  <cover-view class="tab-bar-border"></cover-view>
  <cover-view wx:for="{{list}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab">
   
    <cover-image src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></cover-image>
    <cover-view style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</cover-view>
      <!-- 修改這行代碼，其中index表示索引（我的購物車在第三個圖標，索引為2） -->
     <cover-view class="shoppingCircle" wx:if="{{index === 2}}">{{shopping_count}}</cover-view>
  </cover-view>
</cover-view>

js文件中設置shopping_count變量如下

shopping_count: (wx.getStorageSync('shopping_car') || [] ).length

接着修改css中的內容使得頁面呈現預期效果

最后在shoppingcar頁面中的onShow中定義函數使得作為操作后點擊回來時可以改變顯示的數字

if (typeof this.getTabBar === 'function' &&
      this.getTabBar()) {
      this.getTabBar().setData({
        selected: 2
      })
    }