阅读 2552

小程序自定义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上图标的时候,上下跳动。当时也差点因为这个原因放弃这个方案。然后在之后的摸索中发现,官方的例子用的是<cover-view><cover-image>,改成<view><image>标签以后,就没有这种跳动了。当然换为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这个特性,感觉使用的小程序也不是很多。我们先进行了一些踩坑,也希望可以帮到使用这个特性的小程序。

文章分类
前端
文章标签