uni-segmented-control 样式定制边界明确：仅通过::v-deep覆盖伪元素、手动设border-radius/overflow、统一height与line-height、禁用scroll-with-animation等降级手段实现跨端一致，直接改源码会导致更新丢失与编译错误。
uni-segmented-control 的样式定制到底能改到什么程度
官方组件 uni-segmented-control 提供 styleType="text" 和 styleType="button" 两种基础形态，但仅靠 active-color、size 等 props 无法覆盖多数设计稿需求——比如圆角不一致、下划线粗细/位置偏移、选中态背景渐变、文字加粗等。
真正可定制的边界在于：CSS 变量支持有限，::v-deep 是主要手段，但各端渲染差异大（尤其头条小程序会忽略部分伪类）。
-
styleType="text"下，下划线由伪元素::after生成，可通过::v-deep .segmented-control__item--text::after覆盖宽高、背景色、transform -
styleType="button"的圆角由border-radius控制，但需注意radiusprop 仅影响内部按钮，外层容器仍需手动设overflow: hidden - 字体大小统一用
size属性控制，但 H5 端支持rem，小程序端只认rpx，混用会导致缩放错乱 - 头条小程序不支持
@font-face，自定义图标字体必须用条件编译：/* #ifdef MP-TOUTIAO */块内禁用字体引入
怎么让分段器在不同平台表现一致
微信小程序里 uni-segmented-control 渲染正常，但放到字节系（如抖音、头条）小程序时，常出现文字截断、点击区域偏移、动画卡顿——根本原因是底层 scroll-view 实现未启用 enhanced 模式，且各端对 flex 布局解析不一致。
关键兼容动作不是“加样式”，而是“降级行为”：
- 禁用
scroll-with-animation：头条小程序该属性会引发横向滚动抖动，必须设为false - 固定高度：各端默认高度不同（微信 40rpx、头条 44rpx），显式设
height="44rpx"并配合line-height对齐文字 - 避免使用
flex: 1均分宽度：头条小程序计算错误，改用width: calc(100% / 4)（数字按实际 tab 数替换） - 点击事件用
@clickItem而非@tap：后者在 QQ 小程序中可能触发两次
为什么直接改 uni-segmented-control.vue 源码是危险操作
很多人发现 node_modules 里的 uni_modules/uni-segmented-control/uni-segmented-control.vue 可以直接编辑，改完立刻生效。但这会导致三个硬伤：
- npm update 后源码被覆盖，所有定制丢失
-
uni-app CLI 构建时可能对组件做静态分析，修改结构（如删掉某个
slot）会引发编译报错TypeError: Cannot read property 'children' of undefined - 多端编译时，H5 和 App-nvue 使用不同渲染层，同一份 DOM 修改在 nvue 下完全无效
安全做法是复制一份到 components/custom-segmented-control.vue，保留原逻辑，只替换 template 中的 class 名和 style 绑定，再通过 props 暴露你需要的定制参数（如 underline-height、active-bg）。
下划线平滑位移的实现原理和坑点
要实现类似今日头条那种下划线随 tab 滑动的效果，不能依赖 uni-segmented-control 自带的 animation，它只做选中态切换，不响应滚动。
真实可行路径是监听 scroll-left + 动态计算位置：
- 用
scroll-view包裹 tab 标签，设scroll-x和scroll-with-animation="false" - 每个 tab 用
ref记录 DOM 宽度和 offsetLeft，存入数组tabRects - 在
scroll事件里根据当前scroll-left值，插值计算下划线 left 和 width - 注意：iOS 微信小程序 scroll 事件触发频率极低，需用
requestAnimationFrame节流，否则位移卡顿 - 头条小程序不支持
getBoundingClientRect()，得 fallback 到uni.createSelectorQuery()，且必须加.exec()才能取到值
这个逻辑看似简单，但跨端时 scroll-left 的单位不一致（H5 是 px，小程序是 rpx），且初始滚动位置受父容器 padding 影响——最容易漏掉的是没在 mounted 里 nextTick 再执行一次位置计算，导致首次渲染下划线错位。
