uni-segmented-control 必须置于 page 根容器内，不可嵌套在 scroll-view 或 uni-pull-down-refresh 中；正确结构为「状态栏占位 → 导航栏（含分段器）→ scroll-view」，且需显式设置 scroll-view 高度、动态处理 statusbarheight、确保 current 为响应式 data 字段并覆盖 text 模式下划线样式。
uni-segmented-control 必须放在 page 根容器内，不能嵌套在 scroll-view 或 uni-pull-down-refresh 里
直接把 uni-segmented-control 放进 scroll-view 的 header 区域，会导致 iOS 微信小程序下点击无响应、安卓端滚动时组件错位。这是因为 scroll-view 创建了新的 stacking context，而分段器内部依赖 position: relative 和子元素的绝对定位来渲染指示条，一旦被 scroll-view 包裹，其 offsetTop 计算就会失准。
正确做法是让分段器脱离可滚动区域：
- 页面结构按「状态栏占位 → 导航栏（含分段器）→ scroll-view」三层平铺
-
scroll-view高度需显式设置（如calc(100vh - 100rpx)），避免撑满全屏后遮挡导航栏 - 导航栏自身用
position: sticky或监听onPageScroll动态加fixed类，而非依赖scroll-view的滚动事件
style-type="text" 时 active-color 不生效？检查是否漏写了 ::v-deep 覆盖
官方组件对 text 模式的下划线使用了伪元素 ::after，且默认颜色硬编码为 #007AFF。即使你传了 active-color="#d4237a"，CSS 优先级也不够。
必须手动覆盖：
::v-deep .segmented-control__item--text.segmented-control__item--active::after {
background-color: #d4237a !important;
}
注意：!important 不可省；::v-deep 在 Vue 2 项目中有效，Vue 3 项目请改用 :deep()。
点击切换后内容不更新？确认 current 是响应式 data 字段，不是 props
常见错误是把 current 写成 props 或 computed，导致 @clickItem 回调里赋值无效：
- ❌ 错误写法：
props: { current: Number }—— 父组件传入的值不可写 - ✅ 正确写法：
data() { return { current: 0 } }，并在@clickItem中直接赋值this.current = e.currentIndex - 如果用了 Vuex/Pinia，确保 mutation 是同步更新，且组件 watch 了该 state
多端表现不一致：微信小程序需额外处理顶部安全区
Android 和 H5 下 statusBar 高度固定为 0 或 20px，但 iOS 微信小程序中状态栏高度动态变化（刘海屏/非刘海屏不同）。若导航栏紧贴顶部，可能被遮挡或留白过多。
解决方案是用 uni.getSystemInfoSync().statusBarHeight 动态计算导航栏 top 值：
<view class="nav-bar" :style="{ paddingTop: statusBarHeight + 'px' }"><uni-segmented-control ...></uni-segmented-control></view>
并在 onLoad 中获取并缓存 statusBarHeight，避免重复调用影响性能。
实际项目中最容易被忽略的是：分段器的 current 值和下方内容模块的显示逻辑必须严格对齐索引顺序，哪怕只是多一个空对象或少一个 v-if 判断，都会导致“点了没反应”或“显示错位”。建议用 console.log 打印每次 clickItem 的 e.currentIndex 和当前 this.current，确认二者完全一致再往下走。
