將tabBar節點添加到app.json文件中。TabBar是applet客戶端底部或頂部的選項卡欄的實現。
(1)tabBar相關屬性
Color:選項卡上文本的默認顏色，僅支持十六進制顏色。
選定顏色:選項卡上選定文本的顏色。僅支持十六進制顏色。
Backgroundcolor:選項卡的背景顏色，僅支持十六進制顏色。
border style:tabbar上邊框的顏色。僅支持黑色/白色。
position:position:tabBar，默認值為:bottom，只支持bottom/top。當位置在頂部時，圖標不顯示。
自定義:自定義tabBar。
“tabBar”:{
【顏色】:？"#000000",
"所選顏色":？"#336699",
“backgroundColor”:" #ffffff "，
“邊框樣式”:“黑”，
“位置”:“底部”
？}
(2)列表
List:選項卡列表。
列表接受數組，並且只能配置至少2個選項卡，最多5個選項卡。
PagePath:頁面路徑，必須先在pages中定義。
文本:選項卡上的按鈕文本。
IconPath:圖像路徑。圖標大小限制為40kb，推薦大小為81px * 81px。不支持網絡圖像。SelectedIconPath:選中時的圖像路徑。圖標大小限制為40kb，推薦大小為81px * 81px。不支持網絡圖像。
“列表”:[
？{
"文本":？“主頁”，
"頁面路徑":？"頁數/索引/索引"，
" iconPath ":？" assets/icon/home.png "，
" selectedIconPath ":？" assets/icon/home2.png "
？},
？{
"文本":？“列表”，
"頁面路徑":？"頁面/列表/列表"、
" iconPath ":？"資產/圖標/列表. png "，
" selectedIconPath ":？" assets/icon/list2.png "
？}
]
2.頁面跳轉
(1)跳轉到普通頁面
方法①導航器組件
？& lt！- ?跳轉到正常頁面，點擊返回按鈕可以返回？-& gt；
？& lt領航員？url= "../detail/detail " >轉到詳細信息頁面
方法② navigateTo()方法。
navigateTo()方法用於跳轉到普通頁面。
& lt觀點？bindtap="gotoDetail " >轉到詳細信息頁面
gotoDetail(){
//使用全局api jump，navigateTo()方法跳轉到普通頁面。
wx.navigateTo({
？網址:？'../詳細信息/詳細信息'，
})
}
(2)跳轉到tabBar頁面
方法①導航器組件
如果要使用navigator組件跳轉到tabBar頁面，需要設置open-type="switchTab "。
？& lt！- ?跳轉到tabBar頁面，不能通過後退按鈕返回。因為跳轉到指定的tabBar頁面後，其他所有頁面都會被關閉？-& gt；
& lt領航員？url= "../list/list”？open-type="switchTab " >轉到列表頁面
方法② switchTab()方法
switchTab()方法用於跳轉到tabBar頁面。
& lt觀點？bindtap = " gotoList " & gt轉到列表頁面
gotoList(){
wx.switchTab({
？網址:？'../list/list '，
})
？}