微信小程序官方動態自定義底部tabBar的例子

2019-11-19 10:53:23

字體：大中小

來源：轉載

供稿：網友

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

怎么辦呢？？

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

先看效果圖：

在這里插入圖片描述

1.首先看一下官方用法

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

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

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

組件的目錄結構：

在這里插入圖片描述

3.就是我們要根據需求改造

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

在這里插入圖片描述

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.jsApp({ onLaunch: function () { }, globalData: {  userInfo: null,  list:[] //存放tabBar的數據 }})

3.改造組件

custom-tab-bar/index.jsconst app =getApp();Component({ data: {  selected: 0,  color: "#7A7E83",  selectedColor: "#ff6700",  list: [] //tabBar的數據 }, lifetimes: {  //組件的生命周期函數  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 //這個數是，tabBar從左到右的下標，從0開始   })  }

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

在這里插入圖片描述