查看 Demo 源码

加载中…

底部标签栏凸起动效

导航TabBar指示器弹簧曲线移动端导航

AI 改造

亮点解析

凸起指示器跟随 — 白色通栏下方的大圆+圆角矩形合并的"凸起"形状随选中项水平滑动，0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 略带弹性但不夸张
蓝圆弹出无闪烁 — 选中项图标背后 40×40 蓝色圆形底板从图标中心缩放弹出；同一元素做过渡、不重建 DOM，切换时图标不闪烁
移动端安全区适配 — 白色通栏高 62px，底部预留 21px 主页指示器（Home Indicator）高度，整体贴合 iOS 底部安全区

适用场景

移动端 App 底部导航
小程序 TabBar
H5 应用主框架