1、創(chuàng)建文件

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

2、配置app.json

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

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

????????此時(shí)保存后 tabbar 區(qū)域中就是組件中的內(nèi)容了

3、配置組件內(nèi)容

????????在這里我們使用vantweapp 來(lái)演示

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

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

? ? ? ?②、在index.wxml 中應(yīng)用vant

<van-tabbar active="{{ active }}" bind:change="onChange">// 遍歷內(nèi)容<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});// 切換頁(yè)wx.switchTab({url: this.data.list[event.detail].pagePath,})},} )}

注意：此時(shí)已經(jīng)可以正常切換頁(yè)面了，但是會(huì)出現(xiàn)問(wèn)題，點(diǎn)擊更換pages后，高亮存在問(wèn)題。

分析：每次切換pages 會(huì)導(dǎo)致重新創(chuàng)建一個(gè)tabbar組件，他用來(lái)控制的active 不受切換前的修改邏輯影響，既：修改的為切換前的tabbar組件的tabbar

4、解決高亮BUG

? ? ? ? 方法一：切換時(shí)加載后更新active

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

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

? ? ? ? 方法二：使用數(shù)據(jù)共享

? ? ? ? ①、在組件的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// });// 觸發(fā)修改共享數(shù)據(jù)的方法，并將當(dāng)前的index 傳遞進(jìn)去this.updateActive(event.detail)wx.switchTab({url: this.data.list[event.detail].pagePath,})},} })

????????②、在store中 設(shè)置active 保存選中的頁(yè)面

export const store = observable({active:0,// ....// 更新當(dāng)前點(diǎn)擊的索引標(biāo)識(shí)符updateActive:action(function(val){this.active = val}) })

此時(shí)就可以正常顯示了，但是有閃爍的情況發(fā)生

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。