效果展示
一、實(shí)現(xiàn)步驟
詳細(xì)步驟，可以參考小程序官方給出的文檔:
https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html
1.1. 配置信息
在
app.json中的tabBar項(xiàng)指定custom字段
"tabBar": {
"custom": true,
"selectedColor": "#0052D9",
"color": "#666666",
"borderStyle": "white",
"list": [{
"pagePath": "pages/pickFriend/pickFriend",
"text": "抽個(gè)對(duì)象",
"iconPath": "/images/tabbar/tab1-inactive.png",
"selectedIconPath": "/images/tabbar/tab1-active.png"
}, {
"pagePath": "pages/leftNote/leftNote",
"text": "留的紙條",
"iconPath": "/images/tabbar/tab2-inactive.png",
"selectedIconPath": "/images/tabbar/tab2-active.png"
}, {
"pagePath": "pages/pickedNote/pickedNote",
"text": "抽中紙條",
"iconPath": "/images/tabbar/tab3-inactive.png",
"selectedIconPath": "/images/tabbar/tab3-active.png"
}]
},
1.2. 添加 tabBar 代碼文件
在代碼根目錄下添加入口文件:
custom-tab-bar/index.js
custom-tab-bar/index.json
custom-tab-bar/index.wxml
custom-tab-bar/index.wxss
1.3. 編寫 tabBar 代碼
custom-tab-bar用自定義組件的方式編寫即可，用自定義組件的方式編寫即可，該自定義組件完全接管 tabBar 的渲染。另外，自定義組件新增
getTabBar接口，可獲取當(dāng)前頁(yè)面下的自定義 tabBar 組件實(shí)例。
1.4. 推薦使用vant的tabber組件（不用自己編寫了）
推薦使用vant的tabber組件
Tabbar 標(biāo)簽欄 - Vant Weapp (gitee.io)
1.5. 文件代碼
- custom-tab-bar/index.json
"usingComponents": {
"van-tabbar": "@vant/weapp/tabbar/index",
"van-tabbar-item": "@vant/weapp/tabbar-item/index"
}
- custom-tab-bar/index.js
// custom-tab-bar/index.js
Component({
// 關(guān)閉組件樣式隔離--允許修改vant組件的樣式
options: {
styleIsolation: 'shared'
},
/**
* 組件的初始數(shù)據(jù)
*/
data: {
active: 0,
list: [{
pagePath: "/pages/pickFriend/pickFriend",
text: "抽個(gè)對(duì)象",
iconPath: "/images/tabbar/tab1-inactive.png",
selectedIconPath: "/images/tabbar/tab1-active.png",
}, {
pagePath: "/pages/leftNote/leftNote",
text: "留的紙條",
iconPath: "/images/tabbar/tab2-inactive.png",
selectedIconPath: "/images/tabbar/tab2-active.png",
info: 7
}, {
pagePath: "/pages/pickedNote/pickedNote",
text: "抽中紙條",
iconPath: "/images/tabbar/tab3-inactive.png",
selectedIconPath: "/images/tabbar/tab3-active.png",
info: 10
}]
},
/**
* 組件的方法列表
*/
methods: {
onChange(event) {
// event.detail 的值為當(dāng)前選中項(xiàng)的索引
// 有bug--點(diǎn)擊兩次圖標(biāo)才正確切換
// 解決辦法：https://blog.csdn.net/weixin_62639453/article/details/129773992
// this.setData({ active: event.detail });
// 導(dǎo)航跳轉(zhuǎn)
wx.switchTab({
url: this.data.list[event.detail].pagePath,
})
},
}
})
- custom-tab-bar/index.wxml
<!--custom-tab-bar/index.wxml-->
<van-tabbar active="{{ active }}" bind:change="onChange">
<van-tabbar-item wx:for="{{list}}" info="{{item.info>0 ? item.info : ''}}" wx:key="index">
<image slot="icon" src="{{item.iconPath}}" mode="aspectFit" style="width: 30px; height: 18px;" />
<image slot="icon-active" src="{{item.selectedIconPath}}" mode="aspectFit" style="width: 30px; height: 18px;" />
{{item.text}}
</van-tabbar-item>
</van-tabbar>
二、解決徽標(biāo)超出tabbar區(qū)域的問題
在自定義組件中使用
Vant Weapp組件時(shí)，需開啟styleIsolation: 'shared'
// custom-tab-bar/index.js
Component({
options: {
styleIsolation: 'shared'
},
})
/* custom-tab-bar/index.wxss */
.van-tabbar-item {
--tabbar-item-margin-bottom: 0
}
參考資料：
樣式覆蓋 - Vant Weapp (gitee.io)
定制主題 - Vant Weapp (gitee.io)
三、原生微信小程序使用vant的tabbar的bug（解決點(diǎn)擊倆次圖標(biāo)才正確激活）
3.1. 問題描述
聲明： 在導(dǎo)入使用vant （tabbar）組件的時(shí)候，發(fā)現(xiàn)通過點(diǎn)擊切換的方法來更改
active的方法，結(jié)合wx.switchTab路由跳轉(zhuǎn)，會(huì)出現(xiàn)圖標(biāo)沒用及時(shí)對(duì)應(yīng)上，需要第二次點(diǎn)擊才對(duì)應(yīng)上的問題。
// custom-tab-bar/index.js
methods: {
onChange(event) {
// event.detail 的值為當(dāng)前選中項(xiàng)的索引
this.setData({ active: event.detail });
// 導(dǎo)航跳轉(zhuǎn)
wx.switchTab({
url: this.data.list[event.detail].pagePath,
})
},
}
3.2. 解決辦法
- 去除onChange里面的激活處理
// custom-tab-bar/index.js
methods: {
onChange(event) {
// event.detail 的值為當(dāng)前選中項(xiàng)的索引
// 導(dǎo)航跳轉(zhuǎn)
wx.switchTab({
url: this.data.list[event.detail].pagePath,
})
},
}
-
在每一個(gè)tab頁(yè)面的
onshow生命周期函數(shù)里初始active的值，用來對(duì)應(yīng)每個(gè)頁(yè)面切換之后展示對(duì)應(yīng)的圖標(biāo)。文章來源：http://www.zghlxwxcb.cn/news/detail-850630.html -
第一一個(gè)
tabbar頁(yè)，對(duì)應(yīng)的active可以設(shè)置為0文章來源地址http://www.zghlxwxcb.cn/news/detail-850630.html
/**
* 生命周期函數(shù)--監(jiān)聽頁(yè)面顯示
*/
onShow() {
// 通過 getTabBar 接口獲取組件實(shí)例，并調(diào)用 setData 更新選中態(tài)
this.getTabBar().setData({ active: 0 })
},
- 第二一個(gè)
tabbar頁(yè)，對(duì)應(yīng)的active可以設(shè)置為1
/**
* 生命周期函數(shù)--監(jiān)聽頁(yè)面顯示
*/
onShow() {
// 通過 getTabBar 接口獲取組件實(shí)例，并調(diào)用 setData 更新選中態(tài)
this.getTabBar().setData({ active: 1 })
},
到了這里，關(guān)于定義tabbar，以及解決原生微信小程序使用vant的tabbar的bug（點(diǎn)擊倆次圖標(biāo)才正確激活）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
