小程序系列之tabBar

虽然在appjson里面设置tabBar很方便。但是也有弊端。如果是每个页面都需要有这个tabBar的话，显然用原生的就不能满足这个需求了。因此我们需要第二种方案。

此处我是放在了components文件夹里面，后期有公用的组件都可以放在里面

由于用了组件库，所以此处要同时引入组件库的样式

此时，哪个页面要用 就直接执行最后一步使用组件库就好了。

关于自定义tabbar在跳转的时候，tabbar因为是跟页面的一起绑定，所以会跟随页面一起出现，不是像官方的tabbar一样一直待在页面上。这就是闪动的根本所在。

针对闪动看了一个demo，是让tabbar定义为一个页面，然后让你要显示的页面一组件的形式，插入到tabbar的页面，这样tabbar一直在一个页面上所以就不存在，tabbar跟随页面滚动也就是闪动问题。

2019-2-14，又纠结到这个问题上，使用自定义tabbar使用wxnavigateTo会出现页面栈充满，然后不会跳转问题，使用wxreLaunch等又会出现闪动太大不能接受问题，最后使用在主页面使用官方tabbar组件显示，其他页面需要tabbar的话使用自定义tabbar解决。

例子：>

小程序在二级页面可以设置底部tabbar，设置方法为：

1、首先打开微信开发者工具，找到项目文件目录中的appjson并打开它。

2、然后再Json中怎样一个key——“tabBar“。

3、然后是设置文本的颜色："color":"#8a8a8a"。

4、设置文本选中时的颜色，"selectedColor":"#07c160。

5、设置tabbar的背景颜色，例如："backgroundColor":"gray"。

6、设置tabbar的列表，也就是底部的菜单栏。"list":[{"pagePath":"pages/idndex/index",

"text":"首页", "iconPath":"images/tabbar/tabbar1png" }。

7、保存文件，在效果预览区域进行预览。

wxswitchTab：跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

wxreLaunch：关闭所有页面，打开到应用内的某个页面。

wxreLaunch是可以跳转到tabBar页面的。它和wxswitchTab的区别就是：前者可以触发onLoad事件，而后者则不能触发。所以通过wxreLaunch跳转到tabBar的方式完美解决了不能刷新的问题。

在小程序项目中 我发现 wxswitchTab 跳转是触发onLoad事件  但是只会触发一次 如果我通过退出登录 是不会再次触发onLoad事件 的 而wxreLaunch是可以跳转到tabBar页面的 再次触发onLoad事件

以上就是关于小程序系列之tabBar全部的内容，包括:小程序系列之tabBar、小程序自定义tabbar闪动问题、小程序在二级页面可以设置底部tabbar吗等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！