圖解微信小程序---添加tabBar底部菜單,添加已做好輪播圖操作


圖解微信小程序---添加tabBar底部菜單,添加已做好輪播圖操作

什么是tabBar?

頂部或者底部tab欄
如果小程序是一個多 tab 應用(客戶端窗口的底部或頂部有 tab 欄可以切換頁面),可以通過 tabBar 配置項指定 tab 欄的表現,以及 tab 切換時顯示的對應頁面。

tabBar的基本屬性

tabBar的list屬性

tabBar的list屬性介紹

參考代碼

注意事項

  • list :接受一個數組,只能配置最少 2 個、最多 5 tab。tab 按數組的順序排序,每個項都是一個對象
  • position:tabBar 的位置,僅支持 bottom / top (下和上,選擇上的時候,不顯示初始圖片路徑,不顯示選中圖片路徑)
  • 圖片限制:大小限制為 40kb,建議尺寸為 81px * 81px,不支持網絡圖片。
  • borderStyle:tabbar 上邊框的顏色, 僅支持 black / white
  • 顏色限制:只支持十六進制顏色

代碼筆記

第一步:先在我們的pages中增加我們需要進行切換的頁面

第二步:在我們的app.json全局配置文件中增加tabBar欄

注意:我們的圖片引用路徑以及名稱需要正確匹配

第四步:把我上篇所做示例的swiper輪播圖的代碼,復制到我們的board.wxml首頁當中,緊接着,把我們swiper輪播圖支持的js文件也復制到我們的board.js當中

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM