swiper+自定义tab最可控稳定；需手动实现双向联动、初始化对齐、按需渲染及滚动定位优化。
直接用 swiper + 自定义 tab 标签是最可控、跨端最稳的方案，uni-segment 和 u-tab-bar 容易因注册/样式/响应式问题在小程序里白屏或点击无反应。
swiper 与 tab 标签双向联动必须手动写
uni-app 的 swiper 不支持 v-model，@change 返回的 e.detail.current 不会自动更新视图，tab 点击也不会反向驱动 swiper 滚动——这两件事都得自己补全。
- 给
swiper加ref="swiperRef"（Vue 3）或ref="swiper"（Vue 2） - 在
@change回调里显式赋值：tabCurrent.value = e.detail.current（Vue 3）或this.tabCurrent = e.detail.current（Vue 2） - 每个 tab 项绑定
@click="gotoPage(index)"，函数内调用swiperRef.value?.swipeTo(index)（Vue 3）或this.$refs.swiper?.swipeTo(index)（Vue 2） - App 平台需确认基础库 ≥ 3.1.0，否则
swipeTo无效
tabCurrent 初始值和 swiper 的 current 必须严格一致
页面一进来就错位（比如 tab 显示第 1 项，swiper 却停在第 2 页），90% 是初始化没对齐。
-
data()或setup()里定义的tabCurrent初始值，必须和<swiper current="0"></swiper>中的current属性值完全一致（类型+数值） - 如果数据异步加载后才渲染 tab 列表，不能等接口回来再设
tabCurrent = 0，要先占位，否则首次滑动时e.detail.current可能是undefined或旧索引 - 避免用字符串做索引判断：
v-if="tabCurrent === '0'"会失效，统一用Number或保持初始为数字
内容区别用 v-show，优先用 v-if + rendered 控制加载
小程序不支持 keep-alive，v-show 只切显示，组件仍挂载、仍执行生命周期；真机卡顿、内存飙升多源于此。
- 声明一个
rendered: [true, false, false]数组，每项对应一页是否已加载过 - tab 切换时只设
rendered[index] = true，不卸载已加载页 - 模板中写：
<view v-if="rendered[0]" v-show="tabCurrent === 0"><page-a></page-a></view> - 这样既避免重复创建，又防止非当前页干扰渲染性能
scroll-view 做 tab 栏时 scroll-into-view 容易失效
横向滚动标签栏用 scroll-view 很常见，但 :scroll-into-view="scrollInto" 在 iOS 小程序下常不触发，或滚动偏移不准。
- 确保每个 tab
<view></view>有唯一id，且scrollInto值与之完全匹配（如id="tab2"→scrollInto = "tab2"） - 不要在
change后立刻赋值scrollInto，加个nextTick或setTimeout(() => ..., 30)让 DOM 更新完成 - 慎用
scroll-with-animation：H5 下流畅，iOS 小程序可能卡顿甚至跳帧 - 更稳的做法是放弃
scroll-into-view，改用scroll-left手动计算滚动位置
最易被忽略的是：swiper-item 内部如果有图片、map、canvas 或嵌套 scroll-view，滑动时极易白屏或掉帧——必须用 v-if="tabCurrent === index" 卸载非当前页，而不是依赖 lazy-load 或 v-show。
