当前位置：首页 > article >正文

微信小程序/uniapp动态修改tabBar信息及常见报错

article 2024/10/22 12:38:11

uni.setTabBarItem(options)

介绍：

wx.setTabBarItem是不支持修改url路径的，所以使用uniapp的API。
动态设置 tabBar 某一项的内容：uniapp官网

setTabBarItem 兼容性：

Web	Android	iOS
4.0	3.91	4.11

参数：

options里的具体参数：

名称	类型	必备	默认值	兼容性	描述
index	number	是	-	-	tabBar 的哪一项，从左边算起，索引从0开始
text	string	否	-	-	tab 上按钮文字
iconPath	string	否	-	-	图片路径
selectedIconPath	string	否	-	-	选中时的图片路径
pagePath	string	否	-	-	页面绝对路径
iconfont	SetTabBarItemIconFontOptions	否	-	-	字体图标，优先级高于 iconPath
visible	boolean	否	-	-	tab 是否显示
success	(result: AsyncApiSuccessResult) => void	否	-	-	接口调用成功的回调函数
fail	(result: SetTabBarFail) => void	否	-	-	接口调用失败的回调函数
complete	(result: AsyncApiResult) => void	否	-	-	接口调用结束的回调函数（调用成功、失败都会执行）

iconfont 包含参数：

名称	类型	必备	默认值	兼容性	描述
text	string	是	-	-	字库 Unicode 码
selectedText	string	是	-	-	选中后字库 Unicode 码
fontSize	string	否	-	-	字体图标字号(px)
color	string	否	-	-	字体图标颜色
selectedColor	string	否	-	-	字体图标选中颜色

示例：

uni.setTabBarItem({
  index: 0,
  text: 'text',
  iconPath: '/path/to/iconPath',
  selectedIconPath: '/path/to/selectedIconPath',
  pagePath: '/path/newPagePath',
  success: ()=>{
    console.log('success');
  },
  fail: ()=>{
    console.log('success');
  },
  complete: ()=>{
    console.log('success');
  },
})

报错

使用时遇到了报错："setTabBarItem:fail not TabBar page"
原因：setTabBarItem方法只能在tabbar页面调用（有看到有人说在app中可以在非tabbar页面调用，但是我只是在微信小程序中使用，所以不清楚能不能用）
解决方法：在tabBar页面调用（没办法，微信小程序不支持）

查看全文

http://www.kler.cn/news/360148.html