本文实例为大家分享了微信小程序实现拉链式滑动验证的具体代码，供大家参考，具体内容如下
view结构
向右滑动验证
wxss样式
.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, //滑块的宽,单位是 rpx
maxNum: 620；
coord: '',
},
onShow（）{
this.data.rpx = this.getRpx() // px与rpx的转换
}，
getRpx(){
var winWidth = wx.getSystemInfoSync().windowWidth;
return 750 / winWidth;
},
// 滑块
drag(e) {
let rpx = this.data.rpx
var coord = e.detail.x;
let wid = this.data.maxNum - (coord) * rpx
this.setData({
coord: coord,
text: wid
})
},
// 滑块验证
dragOver(e) {
let rpx = this.data.rpx
if ((this.data.coord) * rpx + this.data.box_width+5>= this.data.maxNum) {
//验证成功之后的代码
} else {
this.setData({
x: 0,
})
}
},
这里是用了微信小程序的组件可移动的视图容器，有两层容器的嵌套，通过滑块的滑动，改变第二层的宽度，以达到拉链式的效果。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。