请教一下微信小程序的问题，参考滴滴的 tabbar

[MagicalCarl]

滴滴出行的微信小程序底部的 tabbar 明显不是原生的 tabbar ，可以看到图标有动画
明显又不是使用 custom-tab-bar 实现的，因为用 custom-tab-bar 每次切换会让页面闪一下
这个 tabbar 是怎么实现的如此流畅，大家有什么头绪吗?

或者是有没有滴滴的同学来解答一下，感谢！

[wednesdayco]

这还需要 DD 来回答么？

[lonjin]

一个主页面，tab 页面都是写成组件的形式，点击 tabbar 来回切换组件而已。

[MagicalCarl]

我一直觉得把页面写成组件不够优雅，可能加载时会加载所有页面会变卡，看来是我想多了

[refsdiary]

微信提供得 api 是不一样得。用户多得小程序 有内测得 api 普通小程序没有得。

[Cloudust]

看了一下，甚至没有兼容安卓 3 个按钮底部的安全区。要么就是自定义 tabbar 用 switchTab 切换页面，这样每个页面都要放一份。要么就写到一个页面里，内容做组件动态切换即可。动画其实没啥，svg 换颜色加个 scale

[ZettarYuFan]

这种大体量的小程序，应该有不少东西是微信专门开放用的

[members]

“因为用 custom-tab-bar 每次切换会让页面闪一下”

这是因为用了分包。
正常用 custom-tab-bar 切换是不会闪的。

[dust2]

@members 不分包也会卡, 而且 tabbar 几屏的首屏 应该没人分包吧

[op351]

"custom-tab-bar 每次切换都会闪"是不正常的 应该是你的代码有问题
第一次切换会闪一下是正常的 是微信的问题 微信开放社区有对应案例的解决方案
不过我觉得第一次闪一下倒无所谓 感知不强 我是没处理

[MagicalCarl]

@op351 #9 是的 是第一次会闪一下，但滴滴的第一次没有闪，所有我好奇滴滴是怎么做到的

[Huelse]

也许是一张大图然后移动位置显示的图标？可以试试滴滴的框架 https://mpxjs.cn/

[3282361]

滴滴小程序用的是“封面方案”，你看到的 tabbar 和对应的几个页面其实是在一个页面上实现的，应该就是使用条件渲染模拟出的 tabbar 切换效果，所以切换较快

[lisongeee]

微信小程序的 tab 其实是多个页面并且是类似 android activity 的层叠渲染，切换页面不会丢失内部状态

滴滴首页滑动一下，切底部其它 tab 再切回来，滑动状态被重置了

其实就是正常的单页面 h5 网页 app 开发逻辑，底部 tab 一个组件，上方一个 slot 根据不同的条件渲染

[wen20]

不闪一下的 tab 应该都是在同一个页面中，类似 vue 的单页应用，猜测。

[nijjba]

开 skyline 渲染就不会闪

[tsja]

我的小程序就是手搓的 tabbar 自定义组件，也没有闪屏问题

[veike]

@refsdiary 腾讯云官方小程序也闪那么一下，同事用 uniapp 搞的就没闪，我原生写的就会闪，没研究怎么搞的。

[zy445566]

https://github.com/didi/dimina
滴滴的小程序用的是这个

[shebaoting]

看这个。很简单的逻辑。https://www.unibest.tech/base/2-tabbar