快捷導(dǎo)航

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

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

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

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

怎么辦呢？？

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

先看效果圖：

在這里插入圖片描述

1.首先看一下官方用法

這是幾個(gè)非常重要你需要知道的

2.小程序提供了一個(gè)例子

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

組件的目錄結(jié)構(gòu)：

在這里插入圖片描述

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

自己改造的目錄結(jié)構(gòu)如下：

在這里插入圖片描述

1.首先配置app.json

"tabBar": {
 "custom": true,//這個(gè)要有， 前面都提到過，注釋要?jiǎng)h了
 "color": "#7A7E83",
 "selectedColor": "#3cc51f",
 "borderStyle": "black",
 "backgroundColor": "#ffffff",
 "list": [
  {
   "pagePath": "pages/index1/index1",
   "iconPath": "/image/home.png",
   "selectedIconPath": "/image/home1.png",
   "text": "首頁(yè)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": "首頁(yè)2"
  },
  {
   "pagePath": "pages/mine2/mine2",
   "iconPath": "/image/user.png",
   "selectedIconPath": "/image/user1.png",
   "text": "我的2"
  }
 ]
},//這個(gè)
"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.下面就是用了

在首頁(yè)index.wxml定義了兩個(gè)按鈕

<button bindtap='tab1'>進(jìn)入tab1</button>
<button bindtap='tab2'>進(jìn)入tab2</button>

時(shí)間：index.js

 tab1: function() {
  app.globalData.list = [{
    "pagePath": "/pages/index1/index1",
    "iconPath": "/image/home.png",
    "selectedIconPath": "/image/home1.png",
    "text": "首頁(yè)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": "首頁(yè)2"
   },
   {
    "pagePath": "/pages/mine2/mine2",
    "iconPath": "/image/user.png",
    "selectedIconPath": "/image/user1.png",
    "text": "我的2"
   }
  ]
  wx.switchTab({
   url: '../index2/index2',
  })
 }

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

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

另外調(diào)整基礎(chǔ)庫(kù)版本的地方在

在這里插入圖片描述

源代碼下載地址

總結(jié)

以上所述是小編給大家介紹的微信小程序官方動(dòng)態(tài)自定義底部tabBar的例子,希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

您可能感興趣的文章: