更新记录

2.0.0（2026-05-15） 下载此版本

本版重点解决 iOS Safari / WKWebView（含 uni-app H5 与 App-Vue 内嵌 WebView）下滑块验证码常见的 橡皮筋回弹、页面惯性滚动、松手仍滑动、跟手发飘 等问题。微信小程序等非 WebKit-WebView 端仍走原有 Vue 触摸事件路径。对外 Props、事件、defineExpose 方法与 v1 一致，无破坏性变更，升级时替换组件文件即可。

1.0.0（2026-02-06） 下载此版本

• 首次发布
• 支持 H5、微信/支付宝小程序、Android/iOS App、鸿蒙
• Canvas 按端自动选用 type="2d" 或 canvas-id 方案
• 支持 maxWidthRpx 弹窗内限宽、refreshScale 打开后刷新缩放
• 暴露 reset、setSuccess、setFail、refreshScale 方法，便于与登录等业务联动

平台兼容性

uni-app(4.63)

slide-verify 滑块验证码组件

uni-app 多端滑块验证码组件，支持 H5、微信/支付宝等小程序、Android/iOS App、鸿蒙。

当前组件版本：v2.0.0（第二版）。更新记录见插件包内 更新说明。

特性

• 支持 H5、小程序、App、鸿蒙，Canvas 按端自动选用稳定方案（H5 用 type="2d"，App/鸿蒙/小程序用 canvas-id + createCanvasContext）
• v2：针对 iOS Safari / WKWebView 优化拖动体验（非 passive touchmove、translate3d(px)、视口坐标同步测量、H5 滚动锁定等），减轻橡皮筋与页面惯性干扰
• 支持缩放、弹窗内限制宽度（maxWidthRpx）
• 暴露 reset、refreshScale、setSuccess、setFail 方法，便于与登录等业务联动

安装

将 slide-verify.vue 放入项目（如 components/slide-verify/），按需引入。

基本用法

<template>
  <SlideVerify
    ref="slideRef"
    :background-img="captchaData.backgroundImg"
    :slider-img="captchaData.sliderImg"
    :block-y="captchaData.captchaY"
    :show-error-mask="showErrorMask"
    slider-text="按住滑块，拖动到合适位置"
    @success="onSuccess"
    @refresh="onRefresh"
  />
</template>

<script setup>
import SlideVerify from '@/components/slide-verify/slide-verify.vue'

const slideRef = ref(null)
const captchaData = ref({ backgroundImg: '', sliderImg: '', captchaY: 70 })
const showErrorMask = ref(false)

const onSuccess = (left) => {
  console.log('滑动结束，x 坐标(取整):', left)
  // 将 left 传给后端校验
}

const onRefresh = () => {
  // 重新请求验证码接口，更新 captchaData
}

// 验证失败时
slideRef.value?.setFail?.()
showErrorMask.value = true

// 刷新/重试时
showErrorMask.value = false
slideRef.value?.reset?.()
</script>

Props

事件

方法（通过 ref 调用）

弹窗内使用

弹窗内建议限制宽度并打开后刷新缩放，避免超出：

<SlideVerify
  ref="slideRef"
  :max-width-rpx="536"
  :background-img="captchaData.backgroundImg"
  :slider-img="captchaData.sliderImg"
  :block-y="captchaData.captchaY"
  @success="onSuccess"
  @refresh="onRefresh"
/>
<!-- 弹窗打开后 -->
slideRef.value?.refreshScale?.()

平台说明

• H5：使用 type="2d" + getContext('2d')
• 小程序 / 鸿蒙 / Android·iOS App：使用 canvas-id + uni.createCanvasContext，保证各端显示稳定

许可证

MIT