小程序自定义tabbar踩坑记

小程序为什么要用自定义tabbar?

我们是为了实现小程序中多个tabbar的效果的。用户进首页的时候，是一个tabbar，在进入到另外的页面的时候，底部的tabbar显示的是另外的一个。这样可以更好的让用户浏览到不同的内容。有点类似于一个主小程序中嵌套了一个子小程序。

现有的一些方案

我们在做这个之前，是有看过其它小程序做的一些效果的。比如小米lite和携程的小程序。

他们的实现的方式是一样的，就是做一个tabbar的自定义组件,然后跳转每个页面的时候用wx.navigateTo方法去跳转。这样是能实现多个tabbar的，当然也是有一些问题的，因为 navigateTo和switchTab的页面加载效果是不一样的。navigateTo是有一个页面的过渡效果的，有一个新页面整体从右侧滑出的动画。但是switchTab是直接出页面的。因为在tabbar上的页面，往往就是需要经常打开的页面，如果有一个跳转页面的滑出动画是会影响用户体验的。所以我们把这个方案做为了一个备选方案。

我们采用的方案

其实微信官方是有一个自定义tabbar的，我们的方案是基于官方的自定义tabbar完成的。 自定义tabbar的地址：developers.weixin.qq.com/miniprogram… （在看下面的文章之前，可以先看一下这个例子） 刚开始看，感觉实施起来并不难，而且官方还提供了一个简单的代码片段，但是在这个过程中，遇到了一些问题，以下是记录遇到的问题和解决方法。

我们新建一个js文件用来管理多个tabbar的状态。在router层做了判断，当进入需要显示另一个tabbar的时候，改变这个全局的状态，并且setdata让新的tabbar显示在视图层上。就是要中心化的管理tabbar的状态。

遇到的问题与解决方法

必须在根目录下的指定文件夹

这个自定义tabbar组件必须放在根目录的custom-tab-bar 文件夹下。这样才能被识别。

tabbar上下跳动

当我第一次把官方的例子稍加修改，移植到我们的小程序上的时候，发现tabbar会在真机上，在点击tabbar上图标的时候，上下跳动。当时也差点因为这个原因放弃这个方案。然后在之后的摸索中发现，官方的例子用的是和，改成和标签以后,就没有这种跳动了。当然换为view和image的后，层级会变低，所以要记得给tabbar设置高的层级，否则会被别的内容挡到。

iphonex以上手机底部tab适配

iphonex以上手机因为底部有一个小横条，所以iPhonex以上手机的tabbar的高度是比较高和其它的手机是不一样的。微信小程序原生的tabbar是有这个高度适配的，但是如果换成自定义的tabbar就需要自己适配了。需要自己做一下高度的适配。而且要注意一下开发者工具和真实机型的差距。开发者工具显示iphonex上的tabbar的样子并不是真实机型中看到的，需要注意一下。

tabbar上item数量或小红点

以前在用原生tabbar的时候，有微信的api可以全局的改变某个item上面的数字和小红点。这样在做像购物车上小红点数量改变的时候就可以用这个api。但是在使用了自定义tabbar的时候，就需要自己更新item上的数量或小红点了。而且是全局更新，因为可能在没有tabbar的页面也需要更新。为了实现全局更新，开始没有想到很好的办法，最开始是把tabbar这个组件的setdata方法存到app.js中，然后在需要更新的时候调用setdata。但是这个方法不太好，之后在跟组长讨论后，提示可以用eventhub了。在tabbar的js中来监听数量的改变，在需要改变数量的地方，触发这个event，这样就实现了全局的数量更新。

switchtab加参数

因为我们的页面在tabbar上面，只能用switchtab的方法去跳转到这个页面，但是小程序的switchtab方法是无法带参数的（我其实不太理解为什么不能带参数，但是从二维码或者分享进入tabbar上的页面，又是可以带参数的），我们采用的方法是我们有一个router工具，当检测到要跳到需要带参数的页面的时候，就把解析到的参数加到storage中，然后在页面的onshow的方法中获取。

小程序的基础库问题

自定义tabbar支持的小程序基础库版本是2.5.0,所以我们需要注意一下老基础库版本的兼容性问题。在低基础库的小程序上，自定义tabbar是可以在小程序的后台设置最低的基础库要求。

tabbar闪动

因为在切换tab的时候，必须setdata，所以肯定有闪动的，这个目前还没有找到很好的办法。

最后

小程序自定义tabbar这个特性，感觉使用的小程序也不是很多。我们先进行了一些踩坑，也希望可以帮到使用这个特性的小程序。