1.

index.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"viewclass'movable-icon'/view/movable-view/movable-area2.

index.wxss

.content{margin:0auto;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-repeatcentercenter;background-size:100%100%;}3.

index.js

4.

data里面:

x:0,area_width:85,//可滑动区域的宽，单位是百分比，设置好后自动居中box_width:120,//滑块的宽,单位是rpxmaxNum:0,//验证成功时的坐标，不需要设置，代码自动计算；5.

方法:

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,})}console.log(this.data.x)},/***生命周期函数--监听页面加载*/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,})}})},