UniApp 的 switch 组件不能直接加文字，因其为封装的原生平台级组件，仅暴露 checked、disabled 等有限属性，不支持子节点或 slot，强行插入文字会被忽略或导致 H5 渲染异常。
uni-app 里 switch 组件为什么不能直接加文字？
因为原生 switch 是平台级组件，iOS、Android、微信小程序各自渲染逻辑不同，UniApp 封装层只暴露了 checked、disabled、@change 等有限属性，不支持子节点或 slot 插入文字——强行写进去会被忽略或导致 H5 渲染异常。
用 view + touchstart 模拟滑块开关的实操要点
真正可控、多端一致的方案是放弃 switch，用 view 自绘轨道和滑块，靠 touch 事件手动计算位移。关键不是“画得多像”，而是状态同步和边界处理：
-
touchstart记录初始clientX，同时获取轨道宽度（用uni.createSelectorQuery()） -
touchmove.stop计算偏移量，限制滑块left值在0到trackWidth - thumbWidth范围内 -
touchend判断最终位置：超过中点则设为开（isChecked = true），否则关；再用animate或transition回弹到目标位置 - 文字提示用两个
text元素分别定位在轨道左右，通过v-if或 class 控制显隐，避免重叠
文字“嵌入”滑块内部的视觉 trick
所谓“文字在滑块里”，其实是把文字放在滑块元素内部，靠绝对定位+ z-index 叠加实现。但要注意：
- 滑块
view必须设position: relative，文字text设position: absolute并居中 - 文字颜色要随状态动态切换：
:style="{ color: isChecked ? '#fff' : '#999' }" - H5 端滑块可能被浏览器默认 focus 样式干扰，加
-webkit-tap-highlight-color: transparent - 小程序真机调试时，
touchmove的changedTouches可能为空，需 fallback 到touches[0]
为什么推荐用组合式 API（Vue3）而不是选项式？
状态绑定更直观，尤其涉及多个响应式变量联动时：
-
const isChecked = ref(false)直接控制开关逻辑 -
const thumbStyle = computed(() => ({ transform: `translateX(${isChecked.value ? '42px' : '0'}` }))把位移和状态强绑定 - watch
isChecked触发文字颜色、背景色、甚至异步请求（如保存设置） - 避免选项式里
data和methods分散导致的更新遗漏
最易被忽略的是：滑块宽度和轨道宽度必须用 rpx 定义，但 translateX 动画值要用 px —— UniApp 在 nvue 下不支持 rpx 单位的 transform，H5 和小程序才支持。实际开发中建议统一用 px + uni.upx2px() 动态换算。
