用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 实战教程 查看内容

小程序自定义tabbar踩坑记

Rolan 2021-1-8 10:06

我们是为了实现小程序中多个tabbar的效果的。用户进首页的时候,是一个tabbar,在进入到另外的页面的时候,底部的tabbar显示的是另外的一个。

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

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


现有的一些方案

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

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


我们采用的方案

其实微信官方是有一个自定义tabbar的,我们的方案是基于官方的自定义tabbar完成的。

我们新建一个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这个特性,感觉使用的小程序也不是很多。我们先进行了一些踩坑,也希望可以帮到使用这个特性的小程序。


作者:努力的Jerry
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏