小程序底部tabbar方案总结

若是你作太小程序，那你必定能体会到写小程序tabbar的痛苦

若是你没作过，那能够告诉你，就是一坨x。但话也说回来了，也不能全怪他(微信)。。。

1、原生方案

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

具体也分为两种方法：

一、配置文件配置

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

在全局配置文件中作以下配置：

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

缺陷：

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

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

二、使用wx.settabbaritem方法配置

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

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

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

2、自定义tabbar

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

taro框架下方法略有不一样，本小程序使用了taro框架，因此详细讲一下

一、配置文件

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

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

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

二、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…。但跟其余的问题相比，这点瑕疵仍是能够接受

3、彻底自定义

理想中的完美方案，彻底放弃官方的那一套。。。本身作一个tabbar。可行吗？可行，难作也是真的

写样式并不难。难点在于，怎样缓存页面节点。好比tabbar对应的两个页面A和B，在页面A加载完成后，点击tabbar，切到B页面。再次点击tabbar，切回A页面。若是不作任何特殊处理，是会从新加载A页面的。这显然是不符合用户习惯的，咱们想要的是展现以前缓存的A页面。因此怎样缓存A页面，就成了关键。react有这样的第三方组件，好比react-keep-alive，vue中有自然的keep-alive这个功能实现。都不是问题。但这些库和方法都是不能用的，须要本身实现一下，有些麻烦。须要缓存虚拟dom。有时间能够整一整