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

拉链式的滑动验证微信小程序-小程序图片滑块验证码-小程序图形验证码

浏览量：2943 时间：2020-04-06 来源：掠影浮华

view结构viewstyle"position:relative;height:90rpx"movable-areaclass"content"style"width:{{area_width}}rpx"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-areaviewclass"black"style"width:{{text}}rpx"/viewviewclass"movable_text"向右滑动验证/view/viewwxss样式.content{position:absolute;right:50rpx;height:90rpx;background-color:#4fca9b;color:white;border-radius:50px;display:flex;justify-content:center;align-items:center;font-size:16px;}.box{z-index:45;height:90rpx;background-color:transparent;border-radius:50rpx;display:flex;justify-content:center;align-items:center;}.movable-icon{z-index:40;width:120rpx;height:90rpx;background-color:blue;border-radius:50rpx;background-size:100%100%;}.black{z-index:10;height:90rpx;background-color:#acacac;position:absolute;right:50rpx;border-radius:50px;}.movable_text{font-size:32rpx;z-index:30;position:absolute;left:50%;transform:translate(-50%,-50%);color:white;top:50%;}js逻辑Page({data:{//滑块x:0,area_width:620,//可滑动区域的宽，单位是百分比，设置好后自动居中text:620,box_width:120,//滑块的宽,单位是rpxmaxNum:620；coord:'',},onShow（）{this.data.rpxthis.getRpx()//px与rpx的转换}，getRpx(){varwinWidthwx.getSystemInfoSync().windowWidth;return750/winWidth;},//滑块drag(e){letrpxthis.data.rpxvarcoorde.detail.x;letwidthis.data.maxNum-(coord)*rpxthis.setData({coord:coord,text:wid})},//滑块验证dragOver(e){letrpxthis.data.rpxif((this.data.coord)*rpx+this.data.box_width+5this.data.maxNum){//验证成功之后的代码}else{this.setData({x:0,})}},1.
这里是用了微信小程序的组件可移动的视图容器，有两层容器的嵌套，通过滑块的滑动，改变第二层的宽度，以达到拉链式的效果

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