小程序底部tabbar方案总结

·  阅读 2118

如果你做过小程序,那你一定能体会到写小程序tabbar的痛苦

如果你没做过,那可以告诉你,就是一坨x。但话也说回来了,也不能全怪他(微信)。。。

一、原生方案

小程序原生是提供了tabbar功能的,也有一定的定制化能力

具体也分为两种方法:

1、配置文件配置

官方配置文档:developers.weixin.qq.com/miniprogram…

在全局配置文件中做如下配置:

配置文件在原生小程序框架中是src目录下app.json文件,在taro框架下是src目录下的app.config.ts文件。还有一点需要注意,配置图标图片路径,必须是本地路径,不能是cdn

缺陷:

1)图片只能是本地路径,也就是说图片必须在项目里,对于打包体积异常敏感的小程序来说,这不是一个很好的方案

2)可定制化程度很低,每个icon的大小,文字颜色。都比较固定,如果有需求是要在tabbar中有凸起的icon,就没辙了

2、使用wx.settabbaritem方法配置

其实和使用配置文件配置原理是一样的,缺陷也一样

官方使用文档:developers.weixin.qq.com/miniprogram…

小结:使用原生方法有很多好处,比如反应快速、加载快、配置方便,所以其实很多大厂的小程序都采用了原生方式。但是本小程序还有一种场景,就是在刚进入页面时,需要通过接口判断是否要显示tabbar,也就是说,在接口未返回前,是不能显示tabbar的,必须要使用wx.hidetabbar方法隐藏tabbar,但是这样又会带来一个新的问题,安卓机每次页面刷新的时候屏幕会闪一下。这是官方api的问题,目前官方还没有修复。。。说个题外话,最好也别指望官方developers.weixin.qq.com/community/d…

二、自定义tabbar

这里说的自定义,也不是完全的自定义,而是在官方提供的方案下进行,有种带着镣铐跳舞的感觉。具体方法:developers.weixin.qq.com/miniprogram…

taro框架下方法略有不同,本小程序使用了taro框架,所以详细讲一下

1、配置文件

首先要将配置文件中关于icon文案的配置删除,已经没有作用了,删减后的配置文件如下

src目录下的app.json.ts文件

list配置项依然需要保留,告诉小程序哪些页面需要使用tabbar

2、tabbar组件

最核心的步骤,tabbar组件书写。在src目录下新建custom-tab-bar目录,其下新建index.tsx和index.module.scss文件,写样式和逻辑

html部分:

css部分:

js部分:

缺陷:

你可能注意到了,更改tabbar当前选中项的方法很奇怪,为什么不直接用usestate的setindex修改,而是使用发布-订阅模式修改状态。。。

这是因为这里有小程序的另一个暗坑,使用wx.switchtab方法进入页面时,tabbar都是一个新的实例

看到了吗,官方的说法。就是说,每次一个新的tabbar页面,都要把tabbar的当前索引重新设置值。就像这样

以为完美了?太年轻,还有坑。因为每次是一个新的tabbar实例,所以在第一次进入页面时,tabbar也会跟着重新绘制一次。这个问题目前是无解的developers.weixin.qq.com/community/d…。但跟其他的问题相比,这点瑕疵还是可以接受

三、完全自定义

理想中的完美方案,完全放弃官方的那一套。。。自己做一个tabbar。可行吗?可行,难做也是真的

写样式并不难。难点在于,怎样缓存页面节点。比如tabbar对应的两个页面A和B,在页面A加载完成后,点击tabbar,切到B页面。再次点击tabbar,切回A页面。如果不做任何特殊处理,是会重新加载A页面的。这显然是不符合用户习惯的,我们想要的是展示之前缓存的A页面。所以怎样缓存A页面,就成了关键。react有这样的第三方组件,比如react-keep-alive,vue中有天然的keep-alive这个功能实现。都不是问题。但这些库和方法都是不能用的,需要自己实现一下,有些麻烦。需要缓存虚拟dom。有时间可以整一整

分类:
前端
分类:
前端
收藏成功!
已添加到「」, 点击更改