• 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