手动绑定touchstart/touchmove/touchend实现滑块验证码，需精准计算偏移、限制边界、动态更新图片与坐标，并严格同步状态防止错乱。
直接用 touchstart/touchmove/touchend 手动控制滑块位移，配合后端下发的缺口坐标和图片资源，才能真正实现可更换、可定制样式的滑块验证码。第三方插件封装太深，样式难改、逻辑黑盒、真机兼容差，不推荐。
如何手动绑定拖拽事件并限制滑动范围
uni-app 不支持原生 dragstart，必须用触摸事件自己算偏移。关键不是“能拖”，而是“拖得准、不出界、松手即校验”：
- 在
touchstart中记录初始clientX和当前blockLeft（滑块左偏移），避免多次触发重置 -
touchmove里实时计算deltaX = e.touches[0].clientX - startX，再叠加初始位置，得到新blockLeft - 必须做边界限制：
blockLeft = Math.max(0, Math.min(barWidth - sliderWidth, blockLeft))，否则滑出右侧后松手，上报值会远超缺口真实 X，校验必失败 - iOS 真机上
e.touches[0].clientX可能受页面缩放影响，建议统一用uni.getSystemInfoSync().screenWidth做比例归一化，或固定容器 width 为 320px 避免响应式干扰
怎么让背景图和缺口图随接口动态更换
每次调用后端 /verify/init 接口，必须完整接收并更新三要素：canvasSrc（背景图 base64）、blockSrc（缺口图 base64）、blockX（正确 X 坐标，后端生成，前端只读）：
- 不要缓存图片 URL，尤其是带时间戳或随机参数的，uni-app 的
<image>组件对 URL 变更不敏感，需强制加v-if控制重渲染，例如：<image v-if="imgKey" :src="BGImg">，每次换图前this.imgKey++ - 缺口图不能直接铺满整个滑块区域——它必须和背景图同尺寸缩放，否则像素级对齐失效。建议后端返回
blockWidth/blockHeight，前端用:style="{ width: cutWidth + 'px', height: cutHeight + 'px' }"精确控制 - 若使用 canvas 绘制（如需裁剪缺口），注意
uni.createCanvasContext在 H5 和小程序中行为一致，但 App 端需确认是否开启useWebGL，否则clip()在某些 Android 机型上会失效，此时改用globalCompositeOperation = 'destination-out'擦除更稳妥
自定义 UI 样式时最容易忽略的兼容点
样式自由度高，但以下几点不处理，会在不同平台表现不一致：
- 滑块按钮的
cursor: pointer在 App 端无效，需靠z-index和显式touch-action: none阻止默认滚动，否则 iOS 上拖着拖着就触发了页面回弹 - 进度条（即已滑动部分）不能用纯 CSS
width模拟，因为滑块是绝对定位的，要同步更新一个<view class="slide-progress">的width，否则视觉反馈脱节 - “重试”图标（
<uni-icons type="refreshempty">）点击后，必须先清空blockLeft = 0、关闭动画类、重置isAnimation = false，再发新请求，否则旧状态残留导致下一次拖动起点错乱 - 所有图片路径必须是 base64 或同源 URL；跨域图在真机上
drawImage会静默失败，且无报错，只能靠onError回调捕获并 fallback 提示
最复杂的地方其实是「状态同步」：用户拖一半点了重试、快速连续点击刷新、网络延迟导致两次 init 返回交错——这些场景下，blockX、blockLeft、imgKey 三个变量必须严格按序更新，任意一个滞后都会让验证逻辑崩溃。别省那几行 if (this.isRequesting) return 的守卫逻辑。
