uni-switch无法自定义颜色和尺寸，因三端渲染机制差异导致样式支持弱；推荐手写checkbox+label模拟开关，通过CSS变量、rpx单位、transform动画及JS动态注入主题色实现多端一致。
uni-app 里用 uni-switch 无法自定义颜色和尺寸？
直接用 uni-switch 组件基本没法改样式——它在小程序端是原生组件封装，H5 端是 Webkit 内置控件，App 端走 Weex 渲染，三端对 custom-class 支持极弱，甚至不生效。尤其 iOS 小程序下，activeColor 和 inactiveColor 只影响轨道色，滑块本身无法染色；H5 上则完全忽略这些 prop。
真正能统一控制的只有两个出口：slot 自定义内容，或彻底手写 view + checkbox 模拟。后者更可控，推荐从零实现。
手写开关组件：用 checkbox + label 模拟，绕过平台限制
核心思路是放弃所有内置开关组件，用标准表单元素模拟交互，再通过 CSS 覆盖默认样式。关键点在于：
- 必须用
<checkbox>（而非<input type="checkbox">），因为uni-app的checkbox组件支持@change且多端事件一致 -
label包裹checkbox，点击 label 触发 checkbox 切换，避免 touch 区域过小 - 用
display: flex布局控制轨道和滑块，避免依赖transform导致小程序渲染异常
示例结构：
<label class="custom-switch">
<checkbox :checked="isChecked" @change="toggle" />
<view class="switch-track">
<view class="switch-thumb" :class="{ active: isChecked }"></view>
</view>
</label>
注意：不要给 checkbox 设 opacity: 0 或 visibility: hidden，某些小程序（如支付宝）会因此丢失事件绑定。
多端对齐的关键 CSS 写法
不同平台对 border-radius、box-shadow、transition 的解析差异极大。实测稳定方案如下：
- 轨道高度统一用
height: 48rpx（非px），避免 H5 下因根字体缩放错位 - 滑块宽度固定为
width: 44rpx，高度同轨道，用margin-top: 2rpx微调垂直居中（小程序需要，H5 不需要但无害） - 动画只用
transition: transform .2s ease-in-out，禁用left或margin-left—— App 端 Weex 不支持这些属性动画 - 激活态颜色用 CSS 变量定义，例如
--switch-active-bg: #409eff，后续主题切换可复用
特别注意：微信小程序不支持 clip-path，所以圆角轨道必须用 border-radius: 64rpx（足够大才能撑满），不能靠裁剪实现。
动态主题下开关状态样式怎么同步更新？
如果用了 CSS 变量做主题，开关的激活色、禁用灰度等必须响应式绑定。但 uni-app 的 style 绑定在小程序端不响应 CSS 变量变化，得靠 JS 注入 style 标签。
推荐做法：
- 在
onLoad或主题切换时，执行document.documentElement.style.setProperty('--switch-active-bg', color) - 禁用态使用
opacity: .6而非color: #ccc，因为 opacity 多端一致性远高于颜色值继承 - 避免在
scoped样式里写主题变量，H5 下 scoped 会加属性选择器导致变量失效，全局样式更可靠
最易被忽略的是：App 端首次启动时，uni.getStorageSync 可能还没读完主题配置，开关初始状态渲染会错一次。务必在 mounted 后加一层 nextTick 再应用主题色。
