189 8069 5689

创新互联百度小程序教程：swan.setTabBarItem

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

    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
     
 
 
      
  
  
  
      2. 
  
  
  
    2.  
      3. 
  
  
  
    3.  {{ !hasCustomedItem ? '自定义Tab信息' : '移除自定义信息' }}
      4. 
  
  
  
    4.  
      5. 
  
  
  
      6.

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

    在开发者工具中打开

    在开发者工具中打开

    在 WEB IDE 中打开

    • JS
     
 
 
      
  
  
  
    1. Page({
      2. 
  
  
  
    2.  onTabItemTap(item) {
      3. 
  
  
  
    3.  console.log('点击第几项', item.index);
      4. 
  
  
  
    4.  if (item.index == 1) {
      5. 
  
  
  
    5.  this.setTabBarItem(item.index)
      6. 
  
  
  
    6.  }
      7. 
  
  
  
    7.  console.log('点击tab对应的路径', item.pagePath);
      8. 
  
  
  
    8.  console.log('点击tab对应的文本', item.text);
      9. 
  
  
  
    9.  },
      10. 
  
  
  
    10.  setTabBarItem(index) {
      11. 
  
  
  
    11.  swan.setTabBarItem({
      12. 
  
  
  
    12.  index: index,
      13. 
  
  
  
    13.  text: '替换文本',
      14. 
  
  
  
    14.  iconPath: '/images/component_normal.png',
      15. 
  
  
  
    15.  selectedIconPath: '/images/component_selected.png',
      16. 
  
  
  
    16.  success: () => {
      17. 
  
  
  
    17.  console.log('setTabBarItem success');
      18. 
  
  
  
    18.  },
      19. 
  
  
  
    19.  fail: err => {
      20. 
  
  
  
    20.  console.log('setTabBarItem fail', err);
      21. 
  
  
  
    21.  }
      22. 
  
  
  
    22.  });
      23. 
  
  
  
    23.  }
      24. 
  
  
  
    24.  // 如需更多自定义底部tabBar样式，请参考swan.setTabBarStyle示例(https://smartprogram.baidu.com/docs/develop/api/show/tabbar_swan-setTabBarStyle/)
      25. 
  
  
  
    25. });
      26.

    错误码

    Android

    错误码 说明

    1001

    执行失败

    iOS

    错误码 说明

    202

    解析失败，请检查参数是否正确

    1002

    超过 icon 文件最大值


    本文名称：创新互联百度小程序教程：swan.setTabBarItem
    URL链接：http://cdxtjz.cn/article/djsshhg.html

    其他资讯