1，前言
分享一個完整的微信小程序自定義Tabbar，tabbar按鈕可以設置為跳轉頁面，也可以設置為功能按鈕。懶得看文字的可以直接去底部，博主分享了GitHub地址。
2，說明
由於微信小程序自帶的Tabbar功能比較單一，比如要做到中間是一個突出的圓形掃一掃按鈕，就需要自定義Tabbar了。
博主創建了一個Tabbar組件，自己寫的樣式，在需要用到的頁面引入組件。
組件使用了position: fixed定位到底部，所以在用到組件的頁面，需要給page加上margin-bottom樣式。
交互是通過在組件上定義的bindtap事件，來進行跳轉頁面或者觸發功能模塊，其中路由跳轉是用的wx.switchTab。事件以及傳參可以通過triggerEvent；
3，核心代碼
文件目錄
引用組件
//在頁面json中
{
"usingComponents": {
"Tabbar":"../../components/tabbar/tabbar"
}
}
//在wxml中
<Tabbar nowIndex="0" bind:switchDialog="switchDialog"/>
組件的data
data: {
tabbarList:[
{
index:0,
pagePath:'../index/index',
title:"首頁",
icon: "../../images/home.png",
onIcon: "../../images/home1.png",
color: "#9B9B9B",
onColor: "#19C29C",
},
{
index:1,
pagePath:'',
icon: "../../images/look.png",
onIcon: "../../images/look.png",
},
{
index:2,
pagePath:'../userCenter/userCenter',
title:"個人中心",
icon: "../../images/my.png",
onIcon: "../../images/my1.png",
color: "#9B9B9B",
onColor: "#19C29C",
}
],
}
組件的路由跳轉
// 切換
changePage(e){
let { path,index } = e.currentTarget.dataset;
if(index === 1){
this.chickLook();
return false;
};
wx.switchTab({
url: path
});
}
源碼GitHub地址：https://github.com/pdd11997110103/ComponentWarehouse
如果看了覺得有幫助的，我是@鵬多多，歡迎 點贊 關注 評論；
END
往期文章
個人主頁