• swan.setTabBarStyle
  • 方法參數(shù)
    • object 參數(shù)說明
  • 示例
    • 圖片示例
    • 代碼示例 1：動態(tài)設(shè)置
    • 代碼示例 2：設(shè)置 borderStyle
    • 代碼示例 3：tab 的默認(rèn)樣式可在 app.json 中設(shè)置
  • 錯誤碼
    • Android
    • iOS

swan.setTabBarStyle

解釋：動態(tài)設(shè)置 tabBar 的整體樣式，底部標(biāo)簽欄位于小程序底部，方便用戶在不同功能模塊之間進(jìn)行快速切換。為保證可用性，底部導(dǎo)航欄承載 2-5 個功能，如果超出 5 個功能項，請酌情移入頁面或菜單內(nèi)。設(shè)計文檔詳見 底部標(biāo)簽欄。

創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供南川網(wǎng)站建設(shè)、南川做網(wǎng)站、南川網(wǎng)站設(shè)計、南川網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計與制作、南川企業(yè)網(wǎng)站模板建站服務(wù)，十載南川做網(wǎng)站經(jīng)驗，不只是建網(wǎng)站，更提供有價值的思路和整體網(wǎng)絡(luò)服務(wù)。

方法參數(shù)

Object object

object 參數(shù)說明

屬性名	類型	必填	默認(rèn)值	說明
color	HexColor	否		tab 上的文字默認(rèn)顏色
selectedColor	HexColor	否		tab 上的文字選中時的顏色
backgroundColor	HexColor	否		tab 的背景色
borderStyle	String	否		tabbar 上邊框的顏色， 有效值 black/white
success	Function	否		接口調(diào)用成功的回調(diào)函數(shù)
fail	Function	否		接口調(diào)用失敗的回調(diào)函數(shù)
complete	Function	否		接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會執(zhí)行）

示例

掃碼體驗

代碼示例

請使用百度APP掃碼

圖片示例

代碼示例 1：動態(tài)設(shè)置

在開發(fā)者工具中打開

在開發(fā)者工具中打開

在 WEB IDE 中打開

• SWAN
• JS

 
 
 

  
  
  

  
  
  
 
  
  
  
 {{ !hasCustomedStyle ? '自定義Tab樣式' : '移除自定義樣式'}}
  
  
  
 
  
  
  

 
 
 

設(shè)計指南

標(biāo)簽項應(yīng)明確區(qū)分默認(rèn)態(tài)和選中態(tài)，方便用戶定位當(dāng)前所在位置；圖標(biāo)風(fēng)格應(yīng)保存一致；每個標(biāo)簽項的文字信息不應(yīng)超出 5 個中文字符，否則將被截斷。
配置背景顏色時，請注意整體頁面效果、及標(biāo)簽項的可讀性和可用性。

錯誤

圖標(biāo)的默認(rèn)態(tài)和選中態(tài)無明顯區(qū)別，只能通過文字顏色判斷當(dāng)前位置。

錯誤

圖標(biāo)與文字信息顏色不統(tǒng)一，背景與標(biāo)簽配色不協(xié)調(diào)，過多使用高飽和度顏色等，均會降低閱讀的舒適度。

代碼示例 2：設(shè)置 borderStyle

在開發(fā)者工具中打開

在開發(fā)者工具中打開

在 WEB IDE 中打開

• JS

 
 
 

  
  
  
Page({
  
  
  
 setTabBarStyle() {
  
  
  
 swan.setTabBarStyle({
  
  
  
 // black
  
  
  
 color: '#000', 
  
  
  
 // red
  
  
  
 selectedColor: '#FF0000', 
  
  
  
 backgroundColor: '#FFFFBD',
  
  
  
 // 可選值還有white
  
  
  
 borderStyle: 'black', 
  
  
  
 success: () => {
  
  
  
 console.log('setTabBarStyle success');
  
  
  
 },
  
  
  
 fail: err => {
  
  
  
 console.log('setTabBarStyle fail', err);
  
  
  
 }
  
  
  
 });
  
  
  
 }
  
  
  
});
 
 
 

代碼示例 3：tab 的默認(rèn)樣式可在 app.json 中設(shè)置

在開發(fā)者工具中打開

在開發(fā)者工具中打開

在 WEB IDE 中打開

• JSON

 
 
 

  
  
  
"tabBar": {
  
  
  
 "list": [
  
  
  
 {
  
  
  
 "pagePath": "pages/index/index",
  
  
  
 "text": "首頁",
  
  
  
 "iconPath": "/images/API_normal.png",
  
  
  
 "selectedIconPath": "/images/API_selected.png"
  
  
  
 },
  
  
  
 {
  
  
  
 "pagePath": "pages/detail/detail",
  
  
  
 "text": "詳情",
  
  
  
 "iconPath": "/images/component_normal.png",
  
  
  
 "selectedIconPath": "/images/component_selected.png"
  
  
  
 }
  
  
  
 ],
  
  
  
 "backgroundColor" : "#ffffff",
  
  
  
 "borderStyle": "white",
  
  
  
 "color": "#000",
  
  
  
 "selectedColor": "#6495ED"
  
  
  
}
 
 
 

錯誤碼

Android

錯誤碼	說明
1001	執(zhí)行失敗

iOS

錯誤碼	說明
1001	當(dāng)前頁面不含 tabbar

當(dāng)前文章：創(chuàng)新互聯(lián)百度小程序教程：swan.setTabBarStyle
網(wǎng)站鏈接：http://uogjgqi.cn/article/dhcddcj.html