微信小程序实现滑块验证微信小程序实现滑块验证

本文实例为大家分享了微信小程序实现滑块验证的具体代码，供大家参考，具体内容如下

文章图片

思路：
1.手指按住并且还能滑动
2.滑动到一定的距离进行判断
百度微信开发者文档：使用 movable-view的可移动区域。结合 movable-view
wxml代码

拖动滑块验证

wxjs

var coord; //声明全局变量// data里面的数据x: 0,area_width: 85,//可滑动区域的宽，单位是百分比，设置好后自动居中box_width: 120,//滑块的宽,单位是 rpxmaxNum: 0, // 函数方法 drag(e) {var that = this; coord = e.detail.x; //根据bindchange 事件获取detail的x轴},dragOver(e) {//根据触摸手指触摸动作结束判断当前的x轴是否大于预设值的值 var that = this; if (coord >= that.data.maxNum) {wx.showToast({title: '验证成功',icon: 'success',duration: 2000})//验证成功之后的代码} else {// 如果不大于则设置 x周的距离为0that.setData({x: 0,})}},onLoad: function (e) {var that = this; wx.getSystemInfo({//获取系统信息设置预设值success: function (res) {console.log(res.windowWidth); var n = Math.floor(res.windowWidth * that.data.area_width / 100 - that.data.box_width / 2)console.log(n)that.setData({maxNum: n,})}})},

.content{margin: 0 auto; margin-top: 200rpx; height: 90rpx; background: #ededed; color: #666; border-radius: 10px; display:flex; justify-content:center; align-items:center; font-size:16px; }.box{/* width: 120rpx; */height: 90rpx; background-color: #fc5b13; border-radius: 10px; display: flex; justify-content: center; align-items: center; }.movable-icon{width: 60rpx; height: 60rpx; background: url(data:image/png; base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAACVElEQVR4Xu3aLY/VQBTG8f8TVgErFk2wGDyCVbwm4PgQJDgQJKt2eRFkNyTgcXwGDLsECwaFIQGHIgENqEOadJPmht5OOzOlZ9ra3p47z29O78t0xMwPzTw/C8DSATMXWG6BmTfA8iG43AIht4CZPQAeA1+AO5I+hFy37jVmtgm8BC4DB5KexdYccn1nB5jZGeA7sFG/wR/gpqR3Q97w+BozewTsNmq8kHQ/puaQa0MALgCfVopHI5jZIXBtpe7oCCEAJ4BqsFWrNo8oBDO7Bbz+x6yNitAJUA3QzE4Cb4DtxAj3gOf/EyEIoGSEYIBSEXoBlIjQG6A0hEEAJSEMBigFIQqgBIRoAO8ISQA8IyQDyIywAzzN8YsxKYBHhOQA3hCyAHhCyAbgBSErgAeE7AANhGoJ7WLi9YTob4dRAGqE08DbFoRLkj4OWdMzszaEXUlPumqOBtCBcCjpRtdg2863IPwCzkn6sa7u2ABtS2tHkq4nBvgNnJX0cxIAHeuKOW6BPUnVs4y1xygdkHFRdfofglMOX7VG1g6YevisAB7CZwPwEj4LgKfwyQG8hU8KkDF81ueHSb4FvIZP0gGew0cDeA8fBVBC+MEApYQfBFBS+N4ApYXvBVBi+GCAUsP3Aai2s1Xb2prHPLbJmdl54HPK8PUC6RFwdaXuqHsEgzrAzLaAb8CperBRM38c2Mz2gIcNgNHDBwHUs3UbeAV8Be5Ket+12Nh1vrFZ+gqwP9nN0l1BvJ9P8m/QM8IC4Hn2Uox96YAUip5rLB3gefZSjH32HfAX1fX6UCbefU0AAAAASUVORK5CYII=) no-repeat center center; background-size: 100% 100%; }

【微信小程序实现滑块验证】以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。