微信小程序自定义tabbar

今天遇到一个需求在小程序tabbar上做扫一扫的功能，但是官方提供的tabbar只能作为跳转页面使用，只能自定义tabbar来实现。

预想了两个方案：

 一、写一个view用绝对定位在页尾，上面放三个按钮其中两个navigateto跳转页面，中间的为扫一扫功能键。朋友说这种跳转的的时候会出现闪烁的bug，感觉有点low暂放。

二、好几个月没写网上搜了下demo发现官方提供了一个自定义tabbar的demo，下载了发现不难，但是遇到几个坑点，记录一下避免以后踩坑。

官方链接：🔗自定义 tabBar · 小程序

第一步、先下载官方的demo，然后进行合并。

第二步、在 app.json 中的 tabBar 项指定 custom 字段，设置为true，同时其余 tabBar 相关配置也补充完整。

所有 tab 页的 json 里需声明 usingComponents 项，写入usingComponents:{ }就可以，也可以在 app.json 全局开启。

第三步、修改custom-tab-bar/index.js的文件

ps:这里需要注意的是list中的pagePath一定要写绝对路径/pages开头

然后是扫一扫的功能，我扫一扫在数组第二个下标为1，判断下标为1时不做页面跳转直接打开扫一扫的功能即可。

ps：tabbar做功能键的时候要写个空白页面出来不要和其他tabbar页共用一个，中午懒省事耽误好久找问题。

第四步、把官方给的使用方法放到tabbar跳转页的onShow方法里，selected根据list下标位置进行设置

效果图

完成以上操作，自定义tabbar就可以使用了，只是官方给的样式比较丑，需要自行调整