关于uniApp自定义配置的底部的tabBar配略解, 以及会遇到的bug若干

首先, 想要自定义tabBar 有两种方法, 可以自己去编写一个tabBar导航栏, 但是性能不会比原生高, 第二种, 使用 uni.setTabBarItem

这是配置项, 有两个注意点, pagePath的路径配置和pages.json有所不同, 需要加上代表绝对路径的 / 如下

,

index代表需要替换的tabBar数组位置, 其余配置一样, viseble 属性控制tabBar显示隐藏, 一般用来隐藏原配置中多余的tabbar

第一个小bug是使用该方法的时机, 这个方法只有在tabBar配置列的页面进行配置时才会生效, 也就是你跳转进入的第一个tabBar页面中进行你需要更换的选项, 也就是首页

注意, switchTab跳转的页面必须在pages.JSON 的tabBar list数组中有对应页面的配置项

最后是在跳转的首页(tabBar页面)中, 进行配置 调用uni.setTabBarItem 方法

js

复制代码

// arrToTab是一个简单的遍历函数 export const arrToTab = (arr) =>{ arr.forEach(it => { uni.setTabBarItem(it) }) }

效果图如下