微信小程序滑动验证-小程序图片滑块验证码-小程序图形验证码-即速应用

微信小程序滑动验证-小程序图片滑块验证码-小程序图形验证码

浏览量：2512 时间：2020-04-06 来源：NAMECZ

此代码只是一种模板代码，样式丑陋，但是功能完善。需要使用的朋友自己修改样式代码和部分参数达到自己需求！此代码用到的组件是微信小程序的movable-area和movable-view;使用简单效果强大省去很多繁琐操作！下边大家看效果图：直接上代码：1.
wxml:
movable-areaclass"content"style"width:{{area_width}}%"movable-viewclass'box'style'width:{{box_width}}rpx'friction"{{100}}"direction"horizontal"x"{{x}}"damping"{{500}}"bindchange"drag"bindtouchend"dragOver"/movable-view/movable-area2.
wxss:
.content{margin:0auto;margin-top:200rpx;height:80rpx;border:1rpxsolid#ddd;}.box{/*width:120rpx;*/height:80rpx;background-color:orange;}3.
js:
varcoord0;Page({/***页面的初始数据*/data:{x:0,area_width:95,//可滑动区域的宽，单位是百分比，设置好后自动居中box_width:120,//滑块的宽,单位是rpxmaxNum:0,//验证成功时的坐标，不需要设置，代码自动计算；},drag(e){varthatthis;coorde.detail.x;},dragOver(e){varthatthis;if(coordthat.data.maxNum){wx.showToast({title:'验证成功',icon:'success',duration:2000})//验证成功之后的代码}else{that.setData({x:0,})}},/***生命周期函数--监听页面加载*/onLoad:function(e){varthatthis;wx.getSystemInfo({success:function(res){console.log(res.windowWidth);varnMath.floor(res.windowWidth*that.data.area_width/100-that.data.box_width/2)that.setData({maxNum:n,})}})},})全自动代码，无脑操作，希望能帮到在座的各位！~