一、前提概要

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

需要的知識(shí)點(diǎn)如下：

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

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

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

注意：在配置自定義tabBar時(shí)，app.json中節(jié)點(diǎn)list不能刪除，因?yàn)槿孕枰付?code>tabBar頁面，這是tabBar的必要配置，但是這些字段不會(huì)影響自定義渲染。(如果低版本不生效，默認(rèn)讀取該字段渲染）

官方文檔如是說

和默認(rèn)tabBar一樣，在app.json 中僅需要在tabBar節(jié)點(diǎn)設(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文件，點(diǎn)擊生成component(將其作為組件自定義，這與頁面導(dǎo)航自定義是一樣原理的）

效果如圖：

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

接下來使用vant-weapp的組件庫(kù)，對(duì)vant-weapp組件不了解的，

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

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

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

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

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

效果：

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

還記得slot的用法嗎，插槽

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

<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)庫(kù)素材

效果：

其中info是對(duì)改組件的傳參，可以動(dòng)態(tài)設(shè)定，不需要?jiǎng)h掉即可

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

效果：

圖片樣式可以自己定義style

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

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

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

“styleIsolation”: "shared"

在父組件配置，修改配置

在index.js中

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

二、 動(dòng)態(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)建綁定實(shí)例
import { store } from '../store/store' // 引入倉(cāng)庫(kù)store
Component({
	behaviors:[storeBindingsBehavior],
	storeBindingsBehavior:[{
		store,
		fields:{
		sum: 'sum'
		},
		actions:{
		}

綁定sum的值到info

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

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

效果如下

三、 頁面切換效果

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

代碼部分

methods: {
	onChange(event) {
		// event.detail 的值為當(dāng)前選中項(xià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è)定好之后會(huì)出現(xiàn)如下情況，頁面有正常跳轉(zhuǎn)，但是圖標(biāo)卻出了bug，其中active在組件中是控制跳轉(zhuǎn)到哪一個(gè)頁面的，為0跳轉(zhuǎn)到一個(gè)，為1跳轉(zhuǎn)到第二個(gè) ，在調(diào)試中，我發(fā)現(xiàn)active的值沒有毛病，按道理不應(yīng)該出bug,所以筆者認(rèn)為應(yīng)該是頁面跳轉(zhuǎn)時(shí)候，組件中的active會(huì)變化，而js文件的active沒問題

解決方法：
將active 存貯到store 進(jìn)行全局共享

添加字段和方法

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

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

效果：

實(shí)現(xiàn)成功

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

官方文檔找到API

效果圖：

四、 配置總結(jié)

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

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

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

最新評(píng)論