更新记录
0.03(2021-04-28) 下载此版本
修复canvasH不生效错误
0.02(2021-04-28) 下载此版本
删除原来的滑动条,因为用起来没有想象中的丝滑,改为直接在图片上滑动
0.01(2021-04-26) 下载此版本
本次上传为第一次上传版本,初学uniapp不到两个月,此组件还有诸多不足之处还请谅解,仅供参考,如有疑问可以评论,还在学校所以平时要上课,有空则会继续更新组件版本
查看更多平台兼容性
Vue2 | Vue3 |
---|---|
√ | × |
App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|
HBuilderX 3.0.0 app-vue app-nvue | × | √ | × | × | × | √ |
钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 |
---|---|---|---|
× | × | × | × |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
√ | √ | √ | √ | √ | √ | √ | √ | √ |
sliding-image-verification使用说明
参数
参数名称 | 参数类型 | 默认值 | 参数说明 |
---|---|---|---|
bgImg | String | ../../static/head.png | 使用的图片地址 |
successNumber | Number | 100 | 滑动成功百分比 范围0-100 |
canvasH | Number | 25 | 截图位置距离顶部高度(占屏幕的百分比)范围0-50 |
allowError | Number | 3 | 允许误差范围 单位px |
sliderBlockWidth | Number | 80 | 滑块宽度 单位rpx 最大80 |
success | fuction | null | 验证成功回调函数 |
refresh | fuction | null | 验证失败回调函数 |
使用步骤
本插件遵循easycom组件规范
可导入后直接在页面使用
无需再次导入
示例代码
<template>
<view>
<sliding-image-verification
bgImg="../../static/headPic.jpg"
:successNumber="76"
:allowError="5"
:canvasH="10"
@success="success"
@refresh="refresh"
></sliding-image-verification>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
success(){
uni.showToast({
icon:"none",
title:"成功了"
})
},
refresh(){
uni.showToast({
icon:"none",
title:"重试"
})
}
}
}
</script>
<style>
</style>
经过测试,本组件可适用于各种图片(包括网络图片),但图片会被拉伸
截取的图片和缺失的部分完全吻合
至于图片拉伸问题
可以通过修改ps图片比例来解决