• swan.setTabBarItem
  • 方法参数
    • object 参数说明
  • 示例
    • 图片示例
    • 代码示例 1：基本示例
    • 代码示例 2：切换 tab 时变化文案
  • 错误码
    • Android
    • iOS

swan.setTabBarItem

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

方法参数

Object object

object 参数说明

示例

扫码体验

代码示例

请使用百度APP扫码

图片示例

代码示例 1：基本示例

在开发者工具中打开

在开发者工具中打开

在 WEB IDE 中打开

• SWAN
• JS

 
 
 

  
  
  
<view class="wrap">
  
  
  
 <button type="primary" bindtap="customItem">
  
  
  
 {{ !hasCustomedItem ? '自定义Tab信息' : '移除自定义信息' }}
  
  
  
 </button>
  
  
  
</view>
 
 
 

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

在开发者工具中打开

在开发者工具中打开

在 WEB IDE 中打开

• JS

 
 
 

  
  
  
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

iOS