13518219792

建站动态

根据您的个性需求进行定制 先人一步 抢占小程序红利时代

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

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 中打开

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

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

在开发者工具中打开

在开发者工具中打开

在 WEB IDE 中打开

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

错误码

Android

错误码 说明

1001

执行失败

iOS

错误码 说明

202

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

1002

超过 icon 文件最大值


本文标题:创新互联百度小程序教程:swan.setTabBarItem
网页路径:http://cdbrznjsb.com/article/djsshhg.html

其他资讯

让你的专属顾问为你服务