圖解微信小程序---添加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當中