1、創建文件

????????在文件根目錄創建組件名字為：custom-tab-bar（指定名稱）

2、配置app.json

????????添加custom屬性，讓其自定義

"tabBar": {"custom": true,"list":[....] }

????????此時保存后 tabbar 區域中就是組件中的內容了

3、配置組件內容

????????在這里我們使用vantweapp 來演示

? ? ? ? ①、在app.json中 引入全局組件

"usingComponents": {"van-tabbar": "@vant/weapp/tabbar/index","van-tabbar-item": "@vant/weapp/tabbar-item/index" }

? ? ? ?②、在index.wxml 中應用vant

<van-tabbar active="{{ active }}" bind:change="onChange">// 遍歷內容<van-tabbar-item info="3" wx:for="{{list}}" wx:key="index" ><imageslot="icon"src="{{ item.iconPath }}"mode="aspectFit"style="width: 30px; height: 25px;"/><imageslot="icon-active"src="{{ item.selectedIconPath }}"mode="aspectFit"style="width: 30px; height: 25px;"/>{{item.text}}</van-tabbar-item> </van-tabbar>

? ? ? ? ③、index.js 部分邏輯

Component({data: {active: 0,list: [{.....}],methods: {onChange(event) {this.setData({active: event.detail});// 切換頁wx.switchTab({url: this.data.list[event.detail].pagePath,})},} )}

注意：此時已經可以正常切換頁面了，但是會出現問題，點擊更換pages后，高亮存在問題。

分析：每次切換pages 會導致重新創建一個tabbar組件，他用來控制的active 不受切換前的修改邏輯影響，既：修改的為切換前的tabbar組件的tabbar

4、解決高亮BUG

? ? ? ? 方法一：切換時加載后更新active

? ? ? ? 每次在頁面顯示的時候，通過getTabbar() 方法獲取實例修改

onShow: function () {this.getTabBar().setData({// 根據list 的索引active: 1})},

? ? ? ? 方法二：使用數據共享

? ? ? ? ①、在組件的js 文件中配置共享

import { storeBindingsBehavior } from 'mobx-miniprogram-bindings' import {store} from '../store/store' Component({behaviors:[storeBindingsBehavior],storeBindings:{store,fields:['active'],actions:['updateActive']},methods: {onChange(event) {// this.setData({// active: event.detail// });// 觸發修改共享數據的方法，并將當前的index 傳遞進去this.updateActive(event.detail)wx.switchTab({url: this.data.list[event.detail].pagePath,})},} })

????????②、在store中 設置active 保存選中的頁面

export const store = observable({active:0,// ....// 更新當前點擊的索引標識符updateActive:action(function(val){this.active = val}) })

此時就可以正常顯示了，但是有閃爍的情況發生

總結

以上是生活随笔為你收集整理的微信小程序如何设置自定义tabBar的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。