建站
咨詢
售后
建站咨詢
新聞中心
- swan.setTabBarStyle
- 方法參數(shù)
- object 參數(shù)說明
- 示例
- 圖片示例
- 代碼示例 1：動態(tài)設(shè)置
- 代碼示例 2：設(shè)置 borderStyle
- 代碼示例 3：tab 的默認(rèn)樣式可在 app.json 中設(shè)置
- 錯誤碼
- Android
- iOS
- 方法參數(shù)
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({// blackcolor: '#000',// redselectedColor: '#FF0000',backgroundColor: '#FFFFBD',// 可選值還有whiteborderStyle: '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 |
文章標(biāo)題：創(chuàng)新互聯(lián)百度小程序教程：swan.setTabBarStyle
本文路徑：http://m.fisionsoft.com.cn/article/dhcddcj.html
