微信小程序中怎么自定義tabBar

微信小程序中怎么自定義tabBar，相信很多沒(méi)有經(jīng)驗(yàn)的人對(duì)此束手無(wú)策，為此本文總結(jié)了問(wèn)題出現(xiàn)的原因和解決方法，通過(guò)這篇文章希望你能解決這個(gè)問(wèn)題。

1、前言

很多時(shí)候，小程序自帶的tabBar不能夠滿足項(xiàng)目需求，這個(gè)時(shí)候就需要我們自定義tabBar了。但是在網(wǎng)上找了很久，基本都是存在切換時(shí)閃爍的問(wèn)題。幸運(yùn)的是從基礎(chǔ)庫(kù)2.5.0開(kāi)始，可以官方使用自定義tabBar了。

2、自定義tabBar樣式

如下圖所示，我們需要一個(gè)展示“首頁(yè)”、“我的”，和一個(gè)可以點(diǎn)擊跳轉(zhuǎn)到發(fā)布的tabBar。這種樣式，原生的就無(wú)法滿足需求了，只能自定義tabBar了。

3、引入custom-tab-bar及相關(guān)配置

3.1、如下圖所示，將custom-tab-bar【下載】導(dǎo)入項(xiàng)目根目錄，

3.2、在app.json中配置好切換的tabbar，并設(shè)置"custom": true，然后將基礎(chǔ)庫(kù)設(shè)置成2.5.0

3.3、使用自定義TabBar，在切換的TabBar界面的onShow中添加如下代碼。如首頁(yè)中設(shè)置 selected: 0，我的中設(shè)置 selected: 2。因?yàn)?selected: 1 是特殊跳轉(zhuǎn)，點(diǎn)擊加號(hào)圖標(biāo)時(shí)，不再是切換tabbar，而是直接跳轉(zhuǎn)發(fā)布界面了。

/**
   * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面顯示
   */
  onShow: function () {
    if (typeof this.getTabBar === 'function' &&
      this.getTabBar()) {
      console.log('設(shè)置選中項(xiàng) 0')
      this.getTabBar().setData({
        selected: 0
      })
    }
  },

看完上述內(nèi)容，你們掌握微信小程序中怎么自定義tabBar的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！