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

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