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

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

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

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

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