• swan.setTabBarStyle
  • 方法参数
    • object 参数说明
  • 示例
    • 图片示例
    • 代码示例 1：动态设置
    • 代码示例 2：设置 borderStyle
    • 代码示例 3：tab 的默认样式可在 app.json 中设置
  • 错误码
    • Android
    • iOS

swan.setTabBarStyle

解释：动态设置 tabBar 的整体样式，底部标签栏位于小程序底部，方便用户在不同功能模块之间进行快速切换。为保证可用性，底部导航栏承载 2-5 个功能，如果超出 5 个功能项，请酌情移入页面或菜单内。设计文档详见 底部标签栏。

创新互联专业为企业提供南川网站建设、南川做网站、南川网站设计、南川网站制作等企业网站建设、网页设计与制作、南川企业网站模板建站服务，十载南川做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。

方法参数

Object object

object 参数说明

属性名	类型	必填	默认值	说明
color	HexColor	否		tab 上的文字默认颜色
selectedColor	HexColor	否		tab 上的文字选中时的颜色
backgroundColor	HexColor	否		tab 的背景色
borderStyle	String	否		tabbar 上边框的颜色， 有效值 black/white
success	Function	否		接口调用成功的回调函数
fail	Function	否		接口调用失败的回调函数
complete	Function	否		接口调用结束的回调函数（调用成功、失败都会执行）

示例

扫码体验

代码示例

请使用百度APP扫码

图片示例

代码示例 1：动态设置

在开发者工具中打开

在开发者工具中打开

在 WEB IDE 中打开

• SWAN
• JS

 
 
 

  
  
  

  
  
  
 
  
  
  
 {{ !hasCustomedStyle ? '自定义Tab样式' : '移除自定义样式'}}
  
  
  
 
  
  
  

 
 
 

设计指南

标签项应明确区分默认态和选中态，方便用户定位当前所在位置；图标风格应保存一致；每个标签项的文字信息不应超出 5 个中文字符，否则将被截断。
配置背景颜色时，请注意整体页面效果、及标签项的可读性和可用性。

错误

图标的默认态和选中态无明显区别，只能通过文字颜色判断当前位置。

错误

图标与文字信息颜色不统一，背景与标签配色不协调，过多使用高饱和度颜色等，均会降低阅读的舒适度。

代码示例 2：设置 borderStyle

在开发者工具中打开

在开发者工具中打开

在 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 的默认样式可在 app.json 中设置

在开发者工具中打开

在开发者工具中打开

在 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	执行失败

iOS

错误码	说明
1001	当前页面不含 tabbar

标题名称：创新互联百度小程序教程：swan.setTabBarStyle
地址分享：http://www.jxjierui.cn/article/dhcddcj.html