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 动态设置

    Page({
        onTabItemTap(item) {
            console.log(item.index);
            if(item.index == 0){
                setTabBarStyle('#FFFFBD')
            }
            else if(item.index == 1){
                setTabBarStyle('#FFFFBE')
            }
            else {
                setTabBarStyle('#FFFFBF')
            }
        }
    
        setTabBarStyle(bg) {
            swan.setTabBarStyle({
                color: '#000',// black
                selectedColor: '#FF0000',// red
                backgroundColor: bg,
                borderStyle: 'black',
                success: function () {
                    console.log('setTabBarStyle success');
                },
                fail: function (err) {
                    console.log('setTabBarStyle fail', err);
                }
            });
        }
    });
    

    设计指南

    DESIGN

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

    错误

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

    错误

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

    # 代码示例 2 borderStyle 为 black

      Page({
          setTabBarStyle() {
              swan.setTabBarStyle({
                  color: '#000',// black
                  selectedColor: '#FF0000',// red
                  backgroundColor: '#FFFFBD',
                  borderStyle: 'black',
                  success: function () {
                      console.log('setTabBarStyle success');
                  },
                  fail: function (err) {
                      console.log('setTabBarStyle fail', err);
                  }
              });
          }
      });
      

      # 代码示例 3 borderStyle 为 white

        <view class="wrap">
            <button type="primary" bindtap="setTabBarStyle">setTabBarStyle</button>
        </view>
        
        Page({
            setTabBarStyle() {
                swan.setTabBarStyle({
                    color: '#000',// black
                    selectedColor: '#FF0000',// red
                    backgroundColor: '#FFFFBD',
                    borderStyle: 'white',
                    success: function () {
                        console.log('setTabBarStyle success');
                    },
                    fail: function (err) {
                        console.log('setTabBarStyle fail', err);
                    }
                });
            }
        });
        

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

          <view class="wrap">
              <button type="primary" bindtap="setTabBarStyle">setTabBarStyle</button>
          </view>
          
          "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