本系列為簡單入門系列，以一定概括性思路來敘述內容，具體可以查看官網

---

大部分的電商應用都是底部或頂部多 tab 的模式. 下面我們從配置角度來分析一下：

第一個：position 配置如下：

默認是 bottom，也可以設置 top 來改變 tabBar 的位置

第二個：list 配置如下：

必須的參數：

• text 文字，如果是 position 為 bottom，會出現在 icon 的下面
• pagePath 跳轉的路徑

可選參數：如果 position 設置了 top，就不會顯示

• iconPath 默認 icon 的路徑
• selectedIconPath 選中 icon 的路徑

這 2 個多不支持網絡圖片，尺寸建議是 81*81

但是請注意：

1、最少 2 個，不然會報錯：

tabBar.list 需至少包含 2 項

2、最多 5 個，

tabBar.list 不能超過 5 項

3、里面的 pagePath 不能為空，而且需要在 pages 數組定義

第三個：設置 text 文字的顏色

• color 默認的文字顏色
• selectedColor 選中的文字顏色

第四個：tabBar 的背景和邊框

• borderStyle 邊框的顏色，默認 black，支持 white 和 black 兩種
• backgroudColor 背景顏色

總結

以上是生活随笔為你收集整理的小程序入门系列之 tabBar的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。