首先, 想要自定义tabBar 有两种方法, 可以自己去编写一个tabBar导航栏, 但是性能不会比原生高, 第二种, 使用 uni.setTabBarItem
这是配置项, 有两个注意点, pagePath
的路径配置和pages.json
有所不同, 需要加上代表绝对路径的 /
如下
,
index代表需要替换的tabBar数组位置, 其余配置一样, viseble
属性控制tabBar显示隐藏, 一般用来隐藏原配置中多余的tabbar
第一个小bug是使用该方法的时机, 这个方法只有在tabBar配置列的页面进行配置时才会生效, 也就是你跳转进入的第一个tabBar页面中进行你需要更换的选项, 也就是首页
扫描二维码关注公众号,回复:
17347852 查看本文章
注意, switchTab跳转的页面必须在pages.JSON 的tabBar list数组中有对应页面的配置项
最后是在跳转的首页(tabBar页面)中, 进行配置 调用uni.setTabBarItem
方法
js
复制代码
// arrToTab是一个简单的遍历函数 export const arrToTab = (arr) =>{ arr.forEach(it => { uni.setTabBarItem(it) }) }
效果图如下