小程序自定义tabbar踩坑记

小程序为何要用自定义tabbar?

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

现有的一些方案

咱们在作这个以前，是有看过其它小程序作的一些效果的。好比小米lite和携程的小程序。小程序

他们的实现的方式是同样的，就是作一个tabbar的自定义组件,而后跳转每一个页面的时候用wx.navigateTo方法去跳转。这样是能实现多个tabbar的，固然也是有一些问题的，由于 navigateTo和switchTab的页面加载效果是不同的。navigateTo是有一个页面的过渡效果的，有一个新页面总体从右侧滑出的动画。可是switchTab是直接出页面的。由于在tabbar上的页面，每每就是须要常常打开的页面，若是有一个跳转页面的滑出动画是会影响用户体验的。因此咱们把这个方案作为了一个备选方案。微信小程序

咱们采用的方案

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

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

遇到的问题与解决方法

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

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

tabbar上下跳动

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

iphonex以上手机底部tab适配

iphonex以上手机由于底部有一个小横条，因此iPhonex以上手机的tabbar的高度是比较高和其它的手机是不同的。微信小程序原生的tabbar是有这个高度适配的，可是若是换成自定义的tabbar就须要本身适配了。须要本身作一下高度的适配。并且要注意一下开发者工具和真实机型的差距。开发者工具显示iphonex上的tabbar的样子并非真实机型中看到的，须要注意一下。iphone

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的方法中获取。oop

小程序的基础库问题

自定义tabbar支持的小程序基础库版本是2.5.0,因此咱们须要注意一下老基础库版本的兼容性问题。在低基础库的小程序上，自定义tabbar是能够在小程序的后台设置最低的基础库要求。

tabbar闪动

由于在切换tab的时候，必须setdata，因此确定有闪动的，这个目前尚未找到很好的办法。

最后

小程序自定义tabbar这个特性，感受使用的小程序也不是不少。咱们先进行了一些踩坑，也但愿能够帮到使用这个特性的小程序。