uni-app官方Switch组件不支持渐变背景，因activeColor/inactiveColor仅接受纯色且底层限制导致background-image失效；必须用view+animation自定义实现，外层view设background: linear-gradient()负责渐变背景，内层view用transform: translateX()控制滑块位移，分层避免偏移撕裂，并通过watchEffect同步props.defaultSwitch到响应式状态。
uni-app 里 switch 组件不支持渐变背景，必须自定义
官方 switch 组件的 activeColor 和 inactiveColor 只接受纯色（如 #3295ED），不支持 linear-gradient()。哪怕你在 CSS 里强行给它加渐变，nvue 渲染引擎和微信小程序都会忽略 —— 这不是写法问题，是底层限制。
用 view + animation 实现带渐变的开关，关键在 background 写法
真正能生效的渐变必须落在 view 元素上，且要用 background shorthand，不能用 background-image（尤其在 nvue 下会失效）。常见错误是写成：
background-image: linear-gradient(to right, #3295ED, #6CF3EB);
正确写法是：
background: linear-gradient(110.47deg, #3295ED 14.95%, #6CF3EB 87.77%);
- 方向用角度或
to bottom等关键词，避免旧版 iOS 微信解析失败 - 渐变色停点加百分比（如
14.95%），否则容易“拉平”看不出变化 - 如果开关宽高比接近 2:1，用
to right比to bottom更直观
动画位移 + 渐变背景要分层控制，别混在一个 view 上
自定义开关常犯的坑：把滑块位移和背景渐变绑在同一个元素上，结果动画一动，整个渐变跟着偏移、拉伸甚至撕裂。正确做法是分两层：
- 外层
view：只负责背景渐变 + 固定宽高 +border-radius，不参与位移动画 - 内层
view（滑块）：只负责位移（transform: translateX()）和自身颜色，背景用纯色或另一组渐变
动画用 uni.createAnimation 控制内层位移，外层保持静止。这样渐变始终居中铺满，滑块平滑左右切换，视觉干净。
Vue 3 + TS 下 props 类型和响应式更新容易漏掉 watchEffect
如果你用 defineProps 声明了 defaultSwitch、pWidth 等参数，但初始状态没同步到 isSwitch，开关默认就是关的，哪怕传了 true 也不生效。原因通常是：
- 没在
onBeforeMount或watchEffect里把props.defaultSwitch赋值给isSwitch - 动画数据
animationData是对象，直接赋值不会触发响应式更新，得用ref包一层或每次export()后重新赋值 - 禁用态（
disabled）下点击事件要@click.prevent.stop，否则可能穿透触发父级 scroll 或其它逻辑
渐变本身没问题，但开关状态不同步、动画卡顿、点击无响应，八成出在这几处。
