一、前提概要

效果：實現(xiàn)一個自定義tabBar，使消息tabBar能夠顯示消息數(shù)量，并通過全局共享的方式，控制消息數(shù)量

需要的知識點如下：

• mobx輔助庫（全局共享，見文章）
• vant組件庫（見文章）
• 組件的behavior （見文章）
• 自定義組件
• 樣式隔離
• 組件數(shù)據(jù)監(jiān)聽器

自定義組件主要分為三個步驟（許多實例實現(xiàn)步驟差不多流程）

• 配置信息 （幾乎每個要實現(xiàn)的都需要這一步）
• 創(chuàng)建自定義組件代碼文件
• 編寫代碼
• 詳細步驟參考官方文檔

注意：在配置自定義tabBar時，app.json中節(jié)點list不能刪除，因為仍需要指定tabBar頁面，這是tabBar的必要配置，但是這些字段不會影響自定義渲染。(如果低版本不生效，默認(rèn)讀取該字段渲染）

官方文檔如是說

和默認(rèn)tabBar一樣，在app.json 中僅需要在tabBar節(jié)點設(shè)置( custom = true 設(shè)置為自定義），然后需要添加代碼文件，

代碼文件

custom-tab-bar/index.js
custom-tab-bar/index.json
custom-tab-bar/index.wxss
custom-tab-bar/index.wxml

我們創(chuàng)建根目錄下custom-tab-bar文件，點擊生成component(將其作為組件自定義，這與頁面導(dǎo)航自定義是一樣原理的）

效果如圖：

此時系統(tǒng)自動識別該文件

接下來使用vant-weapp的組件庫，對vant-weapp組件不了解的，

我們引入vant的tabBar標(biāo)簽組件

vant-weapp官方文檔引入tabBar標(biāo)簽

復(fù)制代碼，放入index.json文件中的components節(jié)點中(局部引入）

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

按照官方文檔，配置js文件的數(shù)據(jù)和方法，即可基本使用

效果：

接下來我們自定義圖標(biāo)，見官方文檔：

還記得slot的用法嗎，插槽

在對應(yīng)的tabbar-item項中直接放入圖片，通過插槽slot指定圖片是選中狀態(tài)還是未選中狀態(tài)
在vant的tabbar組件源代碼其實是有對于兩個插槽接受圖片的，如下：

<slot name="icon"></slot>
<slot name="icon-active"></slot>

源代碼

<van-tabbar active="{{ active }}" bind:change="onChange">
  <van-tabbar-item info="3">
    <image
      slot="icon"
      src="{{ icon.normal }}"
      mode="aspectFit"
      style="width: 30px; height: 18px;"
    />
    <image
      slot="icon-active"
      src="{{ icon.active }}"
      mode="aspectFit"
      style="width: 30px; height: 18px;"
    />
    自定義
  </van-tabbar-item>
  <van-tabbar-item icon="search">標(biāo)簽</van-tabbar-item>
  <van-tabbar-item icon="setting-o">標(biāo)簽</van-tabbar-item>
</van-tabbar>

Page({
  data: {
    active: 0,
    icon: {
      normal: 'https://img.yzcdn.cn/vant/user-inactive.png',
      active: 'https://img.yzcdn.cn/vant/user-active.png',
    },
  },
  onChange(event) {
    this.setData({ active: event.detail });
  },
});

我們往image標(biāo)簽的屬性src放置我們圖標(biāo)即可

沒有好的圖標(biāo)素材見：圖標(biāo)庫素材

效果：

其中info是對改組件的傳參，可以動態(tài)設(shè)定，不需要刪掉即可

接下來我們循環(huán)生成圖標(biāo)，將我們第一個實例配置tabbar的list節(jié)點復(fù)制到index.js的data中，組件通過wx:for循環(huán)list數(shù)組，生成對應(yīng)圖標(biāo)，

效果：

圖片樣式可以自己定義style

設(shè)置info的值可以在圖標(biāo)上顯示 ，但是我們發(fā)現(xiàn)改圖標(biāo)會超出范圍，如下圖

原因很簡單，是vant組件樣式下有一個margin-bottom導(dǎo)致，我們可以通過設(shè)置vant組件的css全局變量設(shè)置

在通過外部樣式修改組件的內(nèi)部樣式（樣式隔離）之前，我們需要設(shè)定樣式隔離

“styleIsolation”: "shared"

在父組件配置，修改配置

在index.js中

Component({
	"options":{
	"styleIsolation": "shared"
	}

二、 動態(tài)顯示info消息

如果未定義info則為假，不顯示，如果為0也為假，也不顯示符合我們的開發(fā)需求

使用mobx全局共享

思路：mobx綁定全局控制info

mobx官方文檔

在index.js如下配置

// custom-tab-bar/index.js
import { storeBindingsBehavior } from 'mobx-miniprogram-bindings' //引入創(chuàng)建綁定實例
import { store } from '../store/store' // 引入倉庫store
Component({
	behaviors:[storeBindingsBehavior],
	storeBindingsBehavior:[{
		store,
		fields:{
		sum: 'sum'
		},
		actions:{
		}

綁定sum的值到info

在一開始我是不知道如何同步sum和info的值，甚至想用 組件通信的知識解決（大家都知道組件通信很麻煩），
但是忘了組件有一個非常的方法：數(shù)據(jù)監(jiān)聽器 (behavior)

a
代碼解釋：
在以往賦值時是不需要對賦值對象加上雙引號“”的，
但是 list需要索引到 list[1] 由于模板語法需要雙引號的形式 'list[1].info' ： a

效果如下

三、 頁面切換效果

通過改組件自帶的 事件綁定函數(shù) onChange解決 （通過其active的變化使用編程式導(dǎo)航（文章介紹更新中）索引list的url路徑切換頁面

代碼部分

methods: {
	onChange(event) {
		// event.detail 的值為當(dāng)前選中項的索引 
		this.setData({
			active: event.detail
		});
		wx.switchTab({
			url: String(this.data.list[event.detail].pagePath), // String轉(zhuǎn)換為字符串 或者加 "" 隱式轉(zhuǎn)換， - 0 則隱式轉(zhuǎn)換為整數(shù)
		})
	},

但是在設(shè)定好之后會出現(xiàn)如下情況，頁面有正常跳轉(zhuǎn)，但是圖標(biāo)卻出了bug，其中active在組件中是控制跳轉(zhuǎn)到哪一個頁面的，為0跳轉(zhuǎn)到一個，為1跳轉(zhuǎn)到第二個 ，在調(diào)試中，我發(fā)現(xiàn)active的值沒有毛病，按道理不應(yīng)該出bug,所以筆者認(rèn)為應(yīng)該是頁面跳轉(zhuǎn)時候，組件中的active會變化，而js文件的active沒問題

解決方法：
將active 存貯到store 進行全局共享

添加字段和方法

在index.js文件中 修改onChnage函數(shù)

methods: {
	onChange(event) {
		// event.detail 的值為當(dāng)前選中項的索引 
		this.updataActive(event.detail)
		wx.switchTab({
			url: String(this.data.list[event.detail].pagePath), // String轉(zhuǎn)換為字符串 或者加 "" 隱式轉(zhuǎn)換， - 0 則隱式轉(zhuǎn)換為int
		})
	},

效果：

實現(xiàn)成功

修改標(biāo)簽顏色值

官方文檔找到API

效果圖：

四、 配置總結(jié)

其實我們都需要配置好tabBar的，不管是不是自定義都需要在app.json的tarBar節(jié)點配置，我們可以自定義配置文件可以tarBar節(jié)點配置好完整屬性，查看效果在細調(diào)，然后我們在創(chuàng)建自定義文件，編寫代碼，然后將我們剛剛配置的list節(jié)點放入 custom-tab-bar的index.js的data中在index.wxml通過循環(huán)遍歷改list數(shù)據(jù)實現(xiàn)效果，這種流程有幾個好處

1. 在版本不兼容時等一些特殊情況，還是能基本顯示效果，
2. 不用同時兩處配置，在app.json節(jié)點配置list復(fù)制到index.js的data，通過頁面循環(huán)即可實現(xiàn)，且所循環(huán)數(shù)據(jù)都能很好滿足數(shù)據(jù)需求，如圖像鏈接，文本等

到此這篇關(guān)于微信小程序開發(fā)自定義tabBar的文章就介紹到這了,更多相關(guān)微信小程序自定義tabBar內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論