最稳路径是用 v-if + scroll-view + 动态 scroll-into-view；tab 标签栏需用 v-for 渲染，:key 用唯一稳定值，id 合法命名，宽度用 flex 自适应，高亮用 :class 控制，点击精准滚动。
直接用 v-if + scroll-view + 动态 scroll-into-view 是最稳路径，别碰 swiper 或原生 tabbar——前者在 iOS 上滑动卡顿、切换错位，后者不支持自定义样式和动态 tab 数量。
Tab 标签栏怎么渲染才不崩
美团式评价分类（如“全部”“好评”“中评”“差评”“有图”）通常是动态返回的，后端可能给 3 项也可能给 6 项，必须防长度突变导致布局错乱：
- 用
v-for渲染，:key必须是唯一稳定值（如item.id或item.type），不能用index——否则 tab 切换时 DOM 复用会丢状态 - 每个 tab 的
id要合法：纯字母/数字/下划线，例如tab-all、tab-good，不能含中文、空格、短横线（-） - 宽度用
flex: 0 0 calc(100% / v-bind:tabCount)，而非固定 rpx 值，适配不同数量（4 项 vs 5 项） - 高亮样式靠
:class="{ active: currentTab === item.type }"控制，别用v-show隐藏非当前项——那样会破坏滚动锚点定位
点击切换怎么精准滚动到对应区块
右侧评价列表按分类分组，每组用 <view :id="'section-' + item.type'></view> 标记，左侧点击触发滚动，但直接 scroll-into-view=" section-all> 在 App 和小程序里常静默失败：</view>
- 必须把
scroll-into-view绑定在scroll-view上，且目标id必须是其**直系子元素**（不能嵌套两层view） - 调用前加
this.$nextTick(() => { ... })，否则 DOM 还没渲染完就执行，iOS 端尤其容易失效 - H5 端可走原生
element.scrollIntoView({ block: 'start' })，但 App 和小程序只认字符串 id，别传配置对象 - 避免用
scrollTop手动计算——不同端单位不一致（px vs rpx vs 自定义逻辑），且 iOS 滚动抖动明显
滑块动画怎么居中对齐文字且不跳动
美团的底部滑块不是等宽矩形，而是随文字长度自适应、居中对齐，且切换时平滑过渡：
- 滑块用绝对定位，
width和left都需动态计算：先用uni.createSelectorQuery()获取当前激活 tab 的boundingClientRect，再算出 left 偏移和 width - 别在
@click里立刻取 DOM 宽度——此时 class 还没切，得在nextTick后再查 - 动画用 CSS
transition: left 0.2s, width 0.2s，不要用 JS 帧动画，否则 H5 端掉帧 - 首次加载时若
currentTab未初始化，滑块位置会偏移，务必在data或setup中设默认值（如currentTab: 'all'）
为什么 onPageScroll 不能用在评价页联动
因为评价分类区域几乎总是放在 scroll-view 内部（要固定顶部 tab、支持局部滚动），而 onPageScroll 只响应整页滚动事件：
- 在
scroll-view里滑动，onPageScroll根本不触发——这不是 bug，是机制隔离 - 即使强行监听页面滚动，
scrollTop值和scroll-view的detail.scrollTop单位、基准都不同，换算极易出错 - 真实场景中快速滑动时，
onPageScroll触发频率低且滞后，导致左侧高亮延迟半秒以上 - 正确做法是监听
@scroll事件，取detail.scrollTop，结合各区块offsetTop判断当前可视区域属于哪个分类
最易被忽略的是：右侧每个分类区块的 id 必须在 scroll-view 直接子节点层级，且所有 tab 和 section 的 key/id 必须严格一一对应——少一个字符、多一个空格，scroll-into-view 就彻底失效，还不报错。
