必须手写滑块弹窗组件，用+构建结构，遮罩用防ios穿透，滑块区域用并同步缩放背景图与缺口坐标，拖拽靠touchstart/move/end手动实现，后端坐标需绑定captchaid校验。
uni-app里滑块弹窗怎么自定义样式和结构
不能直接套用第三方组件默认 UI，得自己控制弹窗容器、遮罩、滑块区域的 DOM 结构和 CSS。uni-app 的 <view></view> + <mask></mask> 是最稳妥的底层组合，比依赖 uni.showModal 或插件内置弹窗更可控。
常见错误是把滑块组件直接塞进 uni.showToast 或 uni.showActionSheet —— 这俩根本不支持嵌入自定义内容，强行用会白屏或报错 Cannot read property 'draw' of null。
- 弹窗外层用
<view class="slide-dialog"></view>定位，配合position: fixed和z-index避免被原生组件遮挡 - 遮罩层必须用
<mask></mask>（不是<view></view>加透明背景），否则 iOS 小程序里点击穿透问题严重 - 滑块画布区域（
<canvas canvas-id="verifyCanvas"></canvas>）要显式设置width和height属性，且 CSS 宽高需与 canvas 属性一致，否则 H5 和 App 渲染错位 - 文字提示、刷新按钮这些交互元素，统一用
<view></view>包裹并绝对定位，避免被 canvas 绘制逻辑干扰
如何让滑块图和背景图像素级对齐
对不齐 = 验证永远失败。根本原因不是前端代码写错，而是图片缩放和坐标计算没同步。
关键点：缺口横坐标 x 是后端返回的原始像素值，前端渲染时必须按相同比例缩放。比如后端说缺口在 120px 处，但你把背景图 CSS 设为 width: 300rpx，而原始图宽是 600px，那实际 left 值就得算成 120 / 600 * 300 = 60rpx。
- 背景图和缺口图必须同源、同尺寸、同缩放比例；不同后端返回的 base64 图尺寸不一致，就先用
uni.getImageInfo拿到真实宽高再算缩放比 - canvas 绘制时，
ctx.drawImage(bgImage, 0, 0, width, height)的width/height必须等于 canvas 元素的width/height属性值，不能用 rpx 计算 - 安卓真机上网络图加载慢，
drawImage可能因图未 ready 就执行而留白，得监听onload或先用uni.downloadFile缓存到tempFilePath
拖拽逻辑为什么在真机上失灵
因为 uni-app 不支持原生 dragstart 事件，所有拖拽都得靠 touchstart/touchmove/touchend 手动实现，而各端 touch 坐标系差异大。
典型现象：H5 上拖得准，iOS 小程序松手后滑块跳回起点，安卓 App 拖动卡顿——本质是 clientX 没减去容器 offsetLeft，或没处理多点触控干扰。
-
touchstart里记下初始touches[0].clientX和滑块当前left值 -
touchmove中实时计算deltaX = touches[0].clientX - startX，再限制范围：left = Math.min(Math.max(0, originLeft + deltaX), maxWidth - sliderWidth) -
touchend触发验证前，必须清除touchmove监听器，否则下次拖拽会叠加上次的 delta - 小程序里
event.touches可能为空，要用event.changedTouches[0]替代
后端返回的缺口坐标怎么安全使用
缺口坐标不能只存变量里，得和本次请求强绑定。否则 A 用户拿到的图，B 用户填个固定值就能过。
最易忽略的是：前端上报的 dragX 值，后端校验时必须和下发时的 session ID 或 token 关联。单纯比数值，等于裸奔。
- 每次弹窗打开前，先调后端接口获取验证数据，响应体至少含：
bgUrl、sliderUrl、blockX、blockY、captchaId（唯一会话标识） - 用户拖完提交时，除了
dragX，必须带上这个captchaId，后端才能查出“这张图对应的正确blockX是多少” - 前端不要缓存
blockX到 vuex 或 localStorage，防止被脚本读取伪造 - 容差建议设为 ±5px，太小用户难对准，太大机器可暴力穷举
滑块弹窗真正复杂的地方不在拖拽动画，而在前后端坐标传递链路上的每一环缩放、单位、绑定关系——少一环，就变成纯前端玩具。
