swan.setTabBarItem

解释：动态设置 tabBar 某一项的内容。

创新互联是一家从事企业网站建设、网站设计、网站建设、行业门户网站建设、网页设计制作的专业网站设计公司，拥有经验丰富的网站建设工程师和网页设计人员，具备各种规模与类型网站建设的实力，在网站建设领域树立了自己独特的设计风格。自公司成立以来曾独立设计制作的站点1000多家。

方法参数

Object object

object 参数说明

属性名	类型	必填	说明
index	Number	是	tabBar 的哪一项，从左边算起
text	String	否	tab 上按钮文字
iconPath	String	否	图片绝对路径，icon 大小限制为 40KB，建议尺寸为 81px 81px，当 position 为 top 时，此参数无效，不支持网络图片
selectedIconPath	String	否	选中时的图片的绝对路径，icon 大小限制为 40KB，建议尺寸为 81px 81px ，当`position`为 top 时，此参数无效
success	Function	否	接口调用成功的回调函数
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

示例

扫码体验

代码示例

请使用百度APP扫码

图片示例

代码示例 1：基本示例

在开发者工具中打开

在 WEB IDE 中打开

SWAN
JS

 
 
 
  
  
  
  
  
   
  
  
   {{ !hasCustomedItem ? '自定义Tab信息' : '移除自定义信息' }}

代码示例 2：切换 tab 时变化文案

在开发者工具中打开

在 WEB IDE 中打开

 
 
 
  
  
  Page({
  
  
   onTabItemTap(item) {
  
  
   console.log('点击第几项', item.index);
  
  
   if (item.index == 1) {
  
  
   this.setTabBarItem(item.index)
  
  
   }
  
  
   console.log('点击tab对应的路径', item.pagePath);
  
  
   console.log('点击tab对应的文本', item.text);
  
  
   },
  
  
   setTabBarItem(index) {
  
  
   swan.setTabBarItem({
  
  
   index: index,
  
  
   text: '替换文本',
  
  
   iconPath: '/images/component_normal.png',
  
  
   selectedIconPath: '/images/component_selected.png',
  
  
   success: () => {
  
  
   console.log('setTabBarItem success');
  
  
   },
  
  
   fail: err => {
  
  
   console.log('setTabBarItem fail', err);
  
  
   }
  
  
   });
  
  
   }
  
  
   // 如需更多自定义底部tabBar样式，请参考swan.setTabBarStyle示例(https://smartprogram.baidu.com/docs/develop/api/show/tabbar_swan-setTabBarStyle/)
  
  
  });

错误码

Android

错误码	说明
1001	执行失败

iOS

错误码	说明
202	解析失败，请检查参数是否正确
1002	超过 icon 文件最大值

网站题目：创新互联百度小程序教程：swan.setTabBarItem
路径分享：http://www.jxjierui.cn/article/djsshhg.html

新闻中心