• 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

 
 
 

  
  
  

  
  
  
 
  
  
  
 {{ !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

iOS

网页标题：创新互联百度小程序教程：swan.setTabBarStyle
网页路径：http://www.mswzjz.com/qtweb/news32/196882.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联