微信小程序实现拉链式的滑动验证

本文实例为大家分享了微信小程序实现拉链式滑动验证的具体代码，供大家参考，具体内容如下

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,
      })
    }
  },

这里是用了微信小程序的组件可移动的视图容器，有两层容器的嵌套，通过滑块的滑动，改变第二层的宽度，以达到拉链式的效果。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持自由互联。