目录
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 | 否 | - | - | 字体图标选中颜色 |
示例:
javascript
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页面调用(没办法,微信小程序不支持)