本文实例为大家分享了微信小程序实现拉链式滑动验证的具体代码，供大家参考，具体内容如下
view结构
<view style="position: relative;height:90rpx">
<movable-area class="content" style="width:{{area_width}}rpx">
<movable-view class='box' style='width:{{box_width}}rpx' friction="{{100}}" direction="horizontal" x="{{x}}" damping="{{500}}" bindchange="drag" bindtouchend="dragOver">
<view class='movable-icon'></view>
</movable-view>
</movable-area>
<view class="black" style="width:{{text}}rpx"></view>
<view class="movable_text"> 向右滑动验证</view>
</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,
})
}
},
这里是用了微信小程序的组件可移动的视图容器，有两层容器的嵌套，通过滑块的滑动，改变第二层的宽度，以达到拉链式的效果。
