微信小程式 自定義tabBar

2021-10-06 09:44:36 字數 734 閱讀 4944

有的人想要最求個性化的tabbar，比如想要在tab中間加乙個巨大的掃碼按鈕，這是很常見的。那麼這時候，自定義tabbar就派上用場了。

,]},


}
1、將tabbar配置為自定義，custom: true

,


}
使用自定義tabbar為什麼需要新增 custom 屬性並且配置為true呢，大家可以嘗試在配置了預設tabbar的基礎上新增custom並配置為true，可以發現，預設的tabbar消失了，儘管你配置的tabbar資訊。配置為true只是為我們自定義讓出位置。

2、編寫自定義tabbar元件

在根目錄新增自定義tabbar檔案（名字路徑有嚴格要求）

custom-tab-bar/index.js


custom-tab-bar/index.json


custom-tab-bar/index.wxml


custom-tab-bar/index.wxss
用自定義元件的方式編寫即可，該自定義元件完全代替了預設tabbar的渲染。另外，自定義元件新增gettabbar介面，可獲取當前頁面下的自定義 tabbar 元件例項。

所以我們可以在自定義tabbar元件中通過wx.switchtab切換頁面即可。

可參考官方文件：傳送門

微信小程式自定義tabbar

第1步先在根目錄下新建自定義tabbar資料夾 一定要放到根目錄下 第三步 修改custom tab bar index.js的檔案 component methods this setdata custom tab bar index.wxml的檔案 tab bar item bindtap sw...

微信小程式自定義tabbar

元件 tabbar.json頁面 tabbar.wxml頁面 這個頁面不懂的可以看vant元件庫的文件 tabbar.js頁面 tabbar.wxss頁面 picker 這樣tabbar元件就寫好了 這東西好像可以自己寫，原理就差不多 之後在需要tabbar的頁面引用 index.html 頁面 i...

微信小程式自定義底部導航tabBar

custom tab bar資料夾要與pages檔案同級，custom tab bar之下的檔案名字為index 官方文件推薦用 fixed 在底部的 cover view cover image 元件渲染樣式，以保證 tabbar 層級相對較高。但是我是在真機除錯時遇到tabbar偶爾消失的bug...