title: swan.setTabBarStyle header: develop nav: api sidebar: tabbar_swan-setTabBarStyle

webUrl: https://qft12m.smartapps.cn/swan-api/tab-bar/tab-bar

解释：动态设置 tabBar 的整体样式

方法参数

Object object

object参数说明

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

示例

扫码体验

webUrl: https://qft12m.smartapps.cn/swan-api/tab-bar/tab-bar - 图1 请使用百度APP扫码

代码示例1 动态设置

在开发者工具中预览效果

:::codeTab

  1. Page({
  2.     onTabItemTap(item) {
  3.         console.log(item.index);
  4.         if(item.index == 0){
  5.             setTabBarStyle('#FFFFBD')
  6.         }
  7.         else if(item.index == 1){
  8.             setTabBarStyle('#FFFFBE')
  9.         }
  10.         else {
  11.             setTabBarStyle('#FFFFBF')
  12.         }
  13.     }
  15.     setTabBarStyle(bg) {
  16.         swan.setTabBarStyle({
  17.             color: '#000',// black
  18.             selectedColor: '#FF0000',// red
  19.             backgroundColor: bg,
  20.             borderStyle: 'black',
  21.             success: function () {
  22.                 console.log('setTabBarStyle success');
  23.             },
  24.             fail: function (err) {
  25.                 console.log('setTabBarStyle fail', err);
  26.             }
  27.         });
  28.     }
  29. });

:::

代码示例2 borderStyle为black

在开发者工具中预览效果

:::codeTab

  1. Page({
  2.     setTabBarStyle() {
  3.         swan.setTabBarStyle({
  4.             color: '#000',// black
  5.             selectedColor: '#FF0000',// red
  6.             backgroundColor: '#FFFFBD',
  7.             borderStyle: 'black',
  8.             success: function () {
  9.                 console.log('setTabBarStyle success');
  10.             },
  11.             fail: function (err) {
  12.                 console.log('setTabBarStyle fail', err);
  13.             }
  14.         });
  15.     }
  16. });

:::

代码示例3 borderStyle为white

在开发者工具中预览效果

:::codeTab

  1. <view class="wrap">
  2.     <button type="primary" bindtap="setTabBarStyle">setTabBarStyle</button>
  3. </view>
  1. Page({
  2.     setTabBarStyle() {
  3.         swan.setTabBarStyle({
  4.             color: '#000',// black
  5.             selectedColor: '#FF0000',// red
  6.             backgroundColor: '#FFFFBD',
  7.             borderStyle: 'white',
  8.             success: function () {
  9.                 console.log('setTabBarStyle success');
  10.             },
  11.             fail: function (err) {
  12.                 console.log('setTabBarStyle fail', err);
  13.             }
  14.         });
  15.     }
  16. });

:::

代码示例4 tab的默认样式可在app.json中设置

在开发者工具中预览效果

:::codeTab

  1. <view class="wrap">
  2.     <button type="primary" bindtap="setTabBarStyle">setTabBarStyle</button>
  3. </view>
  1. "tabBar": {
  2.     "list": [
  3.         {
  4.             "pagePath": "pages/index/index",
  5.             "text": "首页",
  6.             "iconPath":"/images/API_normal.png",
  7.             "selectedIconPath":"/images/API_selected.png"
  8.     },
  9.         {
  10.             "pagePath": "pages/detail/detail",
  11.             "text": "详情",
  12.             "iconPath":"/images/component_normal.png",
  13.             "selectedIconPath":"/images/component_selected.png"
  14.         }
  15.     ],
  16.     "backgroundColor" : "#ffffff",
  17.     "borderStyle": "white",
  18.     "color": "#000",
  19.     "selectedColor": "#6495ED"
  20. }

:::

错误码

Android

错误码 说明
1001 执行失败

iOS

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