swan.setTabBarStyle

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

方法参数

Object object

object 参数说明

示例

扫码体验

代码示例

请使用百度APP扫码

图片示例

代码示例 1：动态设置

在开发者工具中打开

在开发者工具中打开

在 WEB IDE 中打开

• SWAN
• JS

<view class="wrap">
    <button type="primary" bindtap="customStyle">
        {{ !hasCustomedStyle ? '自定义Tab样式' : '移除自定义样式'}}
    </button>
</view>

设计指南

标签项应明确区分默认态和选中态，方便用户定位当前所在位置；图标风格应保存一致；每个标签项的文字信息不应超出 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

iOS