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

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

浏览量:2477 时间: 来源: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,})}})},})全自动代码,无脑操作,希望能帮到在座的各位!~

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

最新资讯

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎