微信小程序官方動態(tài)自定義底部tabBar的例子

更新時間：2019年09月04日 09:57:05 作者：游蕩人生

這篇文章主要介紹了微信小程序官方動態(tài)自定義底部tabBar的例子，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下

最近在做小程序的項目，由于用戶需求在進入頁面時進行選則角色，然后再進入小程序，這時看到的底部菜單看到的不一樣，而我們都知道原生的tabBar是不支持這種做法的。在網(wǎng)上搜集了海量資料后發(fā)現(xiàn)無非兩種解決方法：1.是建立模板,可是會有不能忍受的抖動；2.是利用小程序的組件開發(fā)；但是項目已經(jīng)進行了一般，不可能再進行大的改變；

怎么辦呢？？

無意在一條評論中發(fā)現(xiàn)說微信官方已經(jīng)提供該組件，于是在小程序文檔中尋找很久才在一個犄角旮旯找到：地址鏈接、

先看效果圖：

在這里插入圖片描述

1.首先看一下官方用法

這是幾個非常重要你需要知道的

2.小程序提供了一個例子

在這個例子中有一個微信官方提供的組件：下載地址

組件的目錄結構：

在這里插入圖片描述

3.就是我們要根據(jù)需求改造

自己改造的目錄結構如下：

在這里插入圖片描述

1.首先配置app.json

"tabBar": {
 "custom": true,//這個要有， 前面都提到過，注釋要刪了
 "color": "#7A7E83",
 "selectedColor": "#3cc51f",
 "borderStyle": "black",
 "backgroundColor": "#ffffff",
 "list": [
  {
   "pagePath": "pages/index1/index1",
   "iconPath": "/image/home.png",
   "selectedIconPath": "/image/home1.png",
   "text": "首頁1"
  },
  {
   "pagePath": "pages/mine1/mine1",
   "iconPath": "/image/user.png",
   "selectedIconPath": "/image/user1.png",
   "text": "我的1"
  },
  {
   "pagePath": "pages/index2/index2",
   "iconPath": "/image/home.png",
   "selectedIconPath": "/image/home1.png",
   "text": "首頁2"
  },
  {
   "pagePath": "pages/mine2/mine2",
   "iconPath": "/image/user.png",
   "selectedIconPath": "/image/user1.png",
   "text": "我的2"
  }
 ]
},//這個
"usingComponents": {}

2.app.js

//app.js
App({
 onLaunch: function () {
 },
 globalData: {
  userInfo: null,
  list:[] //存放tabBar的數(shù)據(jù)
 }
})

3.改造組件

custom-tab-bar/index.js

const app =getApp();
Component({
 data: {
  selected: 0,
  color: "#7A7E83",
  selectedColor: "#ff6700",
  list: [] //tabBar的數(shù)據(jù)
 },
 lifetimes: {
  //組件的生命周期函數(shù)
  attached() {
   this.setData({
    list: app.globalData.list
   })
  },
 },
 methods: {
  switchTab(e) {
   const data = e.currentTarget.dataset
   const url = data.path
   wx.switchTab({url})
   this.setData({
    selected: data.index
   })
  }
 }
})

4.下面就是用了

在首頁index.wxml定義了兩個按鈕

<button bindtap='tab1'>進入tab1</button>
<button bindtap='tab2'>進入tab2</button>

時間：index.js

 tab1: function() {
  app.globalData.list = [{
    "pagePath": "/pages/index1/index1",
    "iconPath": "/image/home.png",
    "selectedIconPath": "/image/home1.png",
    "text": "首頁1"
   },
   {
    "pagePath": "/pages/mine1/mine1",
    "iconPath": "/image/user.png",
    "selectedIconPath": "/image/user1.png",
    "text": "我的1"
   }
  ]
  wx.switchTab({
   url: '../index1/index1',
  })
 },
 tab2: function() {
  app.globalData.list = [{
    "pagePath": "/pages/index2/index2",
    "iconPath": "/image/home.png",
    "selectedIconPath": "/image/home1.png",
    "text": "首頁2"
   },
   {
    "pagePath": "/pages/mine2/mine2",
    "iconPath": "/image/user.png",
    "selectedIconPath": "/image/user1.png",
    "text": "我的2"
   }
  ]
  wx.switchTab({
   url: '../index2/index2',
  })
 }

5.在每個tabBar中的onshow()方法中添加如下：

//添加選中效果
if (typeof this.getTabBar === 'function' &&
   this.getTabBar()) {
   this.getTabBar().setData({
    selected: 0 //這個數(shù)是，tabBar從左到右的下標，從0開始
   })
  }

另外調整基礎庫版本的地方在

在這里插入圖片描述