滴滴出行的微信小程序底部的 tabbar 明显不是原生的 tabbar ，可以看到图标有动画
明显又不是使用 custom-tab-bar 实现的，因为用 custom-tab-bar 每次切换会让页面闪一下
这个 tabbar 是怎么实现的如此流畅，大家有什么头绪吗?
或者是有没有滴滴的同学来解答一下，感谢！
第 1 条附言 14 天前
更正一下，使用 custom-tab-bar ，不是每次都会闪一下，是首次会闪一下，但滴滴的没有闪，所有我好奇滴滴是怎么做到的
第 2 条附言 14 天前
#15 实测使用了 skyline 就不会闪
 | 1 wednesdayco 14 天前 这还需要 DD 来回答么？ |
 | 2 lonjin 14 天前 一个主页面，tab 页面都是写成组件的形式，点击 tabbar 来回切换组件而已。 |
 | 3 MagicalCarl OP 我一直觉得把页面写成组件不够优雅，可能加载时会加载所有页面会变卡，看来是我想多了 |
 | 4 refsdiary 14 天前 微信提供得 api 是不一样得。用户多得小程序 有内测得 api 普通小程序没有得。 |
 | 5 Cloudust 14 天前 看了一下，甚至没有兼容安卓 3 个按钮底部的安全区。要么就是自定义 tabbar 用 switchTab 切换页面，这样每个页面都要放一份。要么就写到一个页面里，内容做组件动态切换即可。动画其实没啥，svg 换颜色加个 scale |
 | 6 ZettarYuFan 14 天前 这种大体量的小程序，应该有不少东西是微信专门开放用的 |
 | 7 members 14 天前 “因为用 custom-tab-bar 每次切换会让页面闪一下” 这是因为用了分包。 正常用 custom-tab-bar 切换是不会闪的。 |
 | 9 op351 14 天前 "custom-tab-bar 每次切换都会闪"是不正常的 应该是你的代码有问题 第一次切换会闪一下是正常的 是微信的问题 微信开放社区有对应案例的解决方案 不过我觉得第一次闪一下倒无所谓 感知不强 我是没处理 |
| 10 MagicalCarl OP @op351 #9 是的 是第一次会闪一下，但滴滴的第一次没有闪，所有我好奇滴滴是怎么做到的 |
 | 11 Huelse 14 天前 也许是一张大图然后移动位置显示的图标？可以试试滴滴的框架 https://mpxjs.cn/ |
 | 12 3282361 14 天前 滴滴小程序用的是“封面方案”，你看到的 tabbar 和对应的几个页面其实是在一个页面上实现的，应该就是使用条件渲染模拟出的 tabbar 切换效果，所以切换较快 |
 | 13 lisongeee 14 天前 微信小程序的 tab 其实是多个页面并且是类似 android activity 的层叠渲染，切换页面不会丢失内部状态 滴滴首页滑动一下，切底部其它 tab 再切回来，滑动状态被重置了 其实就是正常的单页面 h5 网页 app 开发逻辑，底部 tab 一个组件，上方一个 slot 根据不同的条件渲染 |
 | 14 wen20 14 天前 不闪一下的 tab 应该都是在同一个页面中，类似 vue 的单页应用，猜测。 |
 | 15 nijjba 14 天前  2 开 skyline 渲染就不会闪 |
 | 16 tsja 14 天前 我的小程序就是手搓的 tabbar 自定义组件，也没有闪屏问题 |
 | 18 zy445566 14 天前 https://github.com/didi/dimina 滴滴的小程序用的是这个 |
 | 19 shebaoting 14 天前 看这个。很简单的逻辑。https://www.unibest.tech/base/2-tabbar |
Select Language