UniApp手机滑块验证组件代码生成器-阿里云开发者社区

DIY可视化实现UniApp手机滑块验证组件，支持自定义背景图片、成功提示、错误提示、划动提示等。

手机滑块验证组件是一种广泛应用于手机应用、网页等场景的用户验证机制，其主要目的是通过用户的滑动操作来验证用户的真实性和操作意图，从而增强系统的安全性。以下是对手机滑块验证组件的详细介绍：

用户的真实性和操作意图，从而增强系统的安全性。以下是对手机滑块验证组件的详细介绍：

一、工作原理

滑块验证组件的工作原理基于人机交互的思想，通过要求用户在屏幕上滑动指定的滑块到特定位置来完成验证。这一过程结合了用户的视觉和运动能力，使得验证过程更加难以被自动化程序绕过。

二、组成元素

手机滑块验证组件通常包含以下几个关键元素：

滑块：用户需要操作的对象，通常是一个可拖动的图标或图形。

背景图：滑块需要与之匹配或对齐的图像，背景图上通常包含有特定的图案或元素，用于引导用户找到正确的滑动位置。

指示信息：提示用户如何操作的文字或图形信息，如“拖动滑块完成验证”。

验证逻辑：后台的验证算法，用于判断用户的滑动操作是否符合预期，包括滑块的位置、滑动轨迹等。

三、操作流程

显示验证页面：当用户需要进行验证时，系统会生成一张包含滑块和背景图的验证码图片，并显示在用户的手机上。

用户操作：用户用手指按住滑块，并沿着屏幕指示的方向拖动，直到滑块到达背景图的指定位置。

验证结果：系统会根据用户的滑动操作进行验证，如果验证通过，用户将获得验证成功的反馈；如果验证失败，用户需要重新进行验证。

四、优势与应用

手机滑块验证组件具有以下优势：

提高安全性：通过结合用户的视觉和运动能力进行验证，增加了自动化程序绕过的难度。

提升用户体验：相比传统的验证码输入方式，滑块验证更加简单直观，用户只需进行简单的滑动操作即可完成验证。

适用范围广：可以灵活应用于各种手机应用、网页等场景，满足不同的验证需求。

手机滑块验证组件广泛应用于各类网站和移动应用中，如用户注册、登录、重置密码等场景。它通过简单的滑动操作，有效地保护了用户的账户安全，并提升了用户体验。

五、技术实现

手机滑块验证组件的实现通常涉及图像处理、机器学习等技术。系统需要能够生成复杂的背景图、随机放置滑块位置、捕捉用户的滑动轨迹等。同时，还需要具备高效的验证算法，以快速准确地判断用户的滑动操作是否符合预期。

综上所述，手机滑块验证组件是一种简单有效且广泛应用的用户验证机制，它通过结合用户的视觉和运动能力进行验证，提高了系统的安全性和用户体验。

六、UniApp组件库实现

<template>
  <view class="diy-verify" v-if="initShow" :class="isModal?'diy-verify-modal':''" :id="elid"  @touchmove.stop.prevent="stopMoveHandle" :style="verifyWidthStyle">
    <view class="diy-verify-close" @tap="close" v-if="isModal">
      <u-icon :size="50" color="#fff" name="close"></u-icon>
    </view>
    <view class="diy-verify-wrap"  v-if="isShow">
      <view class="diy-verify-box">
        <image class="diy-verify-img" v-if="verifyImg" :src="verifyImg" mode="scaleToFill"></image>
        <!-- 右侧用来验证的滑块 -->
        <view class="diy-verify-block-verify" :style="blockVerifyStyle"></view>
        <!-- 被css操控的滑块 -->
        <view class="diy-verify-block-move" :style="blockMoveStyle"></view>
        
        <view class="diy-verify-tips" v-if="!showBottomVerify">
          <text class="diy-verify-tips-text" :style="blockTipsStyle">{{ tips }}</text>
        </view>
        <!-- 手指触摸的滑块 -->
        <view class="diy-verify-block-touch" :style="blockTouchStyle" @touchstart="touchstartHandle"
          @touchmove="touchmoveHandle" @touchend="touchendHandle">
        </view>
        <view @tap="initVerify()" class="diy-verify-refresh">
          <u-icon :size="50" :color="refreshColor" name="reload"></u-icon>
        </view>
      </view>
      <view class="diy-verify-verify" v-if="showBottomVerify"  :style="verifyBottomStyle">
        <view   :class="(isSuccess?'diy-verify-success-text':'diy-verify-text')">{{tips}}</view>
        <!-- 被css操控的滑块 -->
        <view class="diy-verify-verify-move" :style="verifyMoveStyle">
          <u-icon :size="bottomSize-10" :name="isSuccess?'checkbox-mark':'arrow-right-double'"></u-icon>
        </view>
        <!-- 手指触摸的滑块 -->
        <view class="diy-verify-verify-touch" :style="verifyTouchStyle" @touchstart="touchstartHandle"  @touchmove="touchmoveHandle" @touchend="touchendHandle">
        </view>
      </view>
    </view>
  </view>
</template>
 
<script>
  export default {
    name: 'zmmVerifyVerify',
    emits: ["update:modelValue",'close',"change"],
    props: {
      // 通过双向绑定控制组件的弹出与收起
      modelValue: {
        type: Boolean,
        default: false
      },
      //是否弹窗验证
      isModal:{
        type:Boolean,
        default: false
      },
      //提醒
      tip: {
        type: String,
        default: '请将左侧透明滑块拖进白色框内'
      },
      successTip: {
           type: String,
           default: "验证通过"
      },
      failTip:{
        type: String,
        default: "验证失败"
      },
      //滑块大小
      verifySize: {
        type: Number,
        default: 50
      },
      //滑块颜色
      verifyColor: {
        type: String,
        default: 'rgba(0,0,0,0.4)'
      },
      //图片验证高度
      verifyHeight:{
        type: Number,
        default: 170
      },
      // 图片
      verifyImg: {
        type: String,
        default: ''
      },
      //刷新颜色
      refreshColor: {
        type: String,
        default: '#ffffff'
      },
      //校验正负差值区间像素
      between: {
        type: Number,
        default: 10
      },
      //如果不显示底部滑动条时提示字段颜色
      tipColor:{
        type: String,
        default: '#ffff00'
      },
      // 是否显示底部滑动条
      showBottomVerify: {
        type: Boolean,
        default: false
      },
      //底部滑块大小
      bottomSize: {
        type: Number,
        default: 40
      },
      bottomBarColor: {
        type: String,
        default: '#eee'
      },
      bottomSuccessColor: {
        type: String,
        default: '#19be6b'
      },
      //底部滑块颜色
      bottomBgColor: {
            type: String,
            default: '#ffffff'
      },
      bottomColor: {
        type: String,
        default: '#bbbbbb'
      },
      bottomBorderColor: {
        type: String,
        default: '#bbbbbb'
      },
    },
    data() {
      return {
        elid: this.$u.guid(),
        verifyWidth:280,
        initShow:!this.isModal,
        tips:this.tip,
        startPageX: 0, //开始距离
        moveLeft: 0, //滑动距离
        isSuccess: false, //是否成功
        autoLeft: 80, //验证滑块随机的像素
        autoTop: 80, //验证滑块随机的top像素
        isShow: false
      };
    }, 
        watch: {
      verifyImg: {
        immediate: true,
        handler(){
          this.init()
        }
      }
    },
    computed: {
      verifyWidthStyle(){
        return `--diy-verify-width:${this.verifyWidth}px;--diy-verify-height:${this.verifyHeight}px`
      },
      blockVerifyStyle() {
        return `top:${this.autoTop}px;left:${this.autoLeft}px;height:${this.verifySize}px;width:${this.verifySize}px;background-color:${this.verifyColor};`
      },
      blockMoveStyle() {
        let moveLeft = this.isSuccess?this.autoLeft:this.moveLeft;
        return `top:${this.autoTop}px;left:${moveLeft}px;height:${this.verifySize}px;width:${this.verifySize}px;background-color: ${this.verifyColor};`
      },
      blockTipsStyle(){
        return `color:${this.tipColor}`
      },
      blockTouchStyle() {
        return `top:${this.autoTop}px;height:${this.verifySize}px;width:${this.verifySize}px;`
      },
      verifyMoveStyle() {
        let moveLeft = this.isSuccess?this.autoLeft:this.moveLeft;
        return `border:1px solid ${this.bottomBorderColor};left:${moveLeft}px;height:${this.bottomSize}px;width:${this.bottomSize}px;color:${this.bottomColor};background-color: ${this.bottomBgColor};`
      },
      verifyTouchStyle() {
        return `height:${this.bottomSize}px;width:${this.bottomSize}px;`
      },
      verifyBottomStyle() {
        return `font-size:${this.bottomSize-26}px;line-height:${this.bottomSize}px;height:${this.bottomSize}px;background-color:${this.isSuccess?this.bottomSuccessColor:this.bottomBarColor}`
      }
    },
    mounted() {
      this.init()
    },
    methods: {
      // 初始化
      init() {
        if(this.initShow){
          this.$nextTick(()=>{
            this.$uGetRect('#' + this.elid).then((res) => {
              this.verifyWidth = this.isModal?res.width-20:res.width;
              this.initVerify()
            });
          })
        }
      },
      initVerify(){
        this.isShow = true
        this.moveLeft = 0;
        this.isSuccess = false;
        this.autoTop = this.randPostion(0, this.verifyHeight - this.verifySize);
        this.autoLeft = this.randPostion(this.verifySize + 20, this.verifyWidth - this.verifySize);
      },
      show(){
        this.initShow = true;
        this.init();
      },
      close(){
        if(this.isModal){
          this.initShow = false;
          this.$emit("close");
        }
      },
      // 拦截其他触摸事件防止nvue下input等元素层级问题
      stopMoveHandle(e) {
        if (e.preventDefault) {
          // 阻止页面滚动
          e.preventDefault()
        }
      },
      // 随机数
      randPostion(min, max) {
        //返回包括最大/小值
        return Math.floor(Math.random() * (max - min + 1)) + min;
      },
      //按下
      touchstartHandle(e) {
        if (this.isSuccess) {
          return;
        }
        this.startPageX = e.changedTouches[0].pageX;
      },
      // 滑动
      touchmoveHandle(e) {
        // 滑动分两个块来操作不然会有数据抖动
        if (this.isSuccess) {
          return;
        }
        var left = e.changedTouches[0].pageX - this.startPageX; //补偿起始位置
        this.moveLeft = left;
      },
      // 滑动离开（最终）
      touchendHandle(e) {
        var endLeft = e.changedTouches[0].pageX;
        var verifyLeft = this.autoLeft + this.startPageX; //补偿起始位置
        var chazhi = verifyLeft - endLeft; //最终差值
        // 判断是否在正负差值区间
        if (chazhi >= 0 - this.between && chazhi <= this.between) {
          this.isSuccess = true;
          // 通过会执行成功和关闭
          this.tips = this.successTip
          this.$emit("update:modelValue", true);
          this.$emit("change", true);
          uni.showToast({
            icon:'none',
            title:this.successTip?this.successTip:'验证通过'
          })
          this.close()
        } else {
          this.tips = this.failTip?this.failTip:'验证失败';
          setTimeout(()=>{
            this.tips = this.tip;
          })
          // 失败会执行失败并重新初始化
          this.show();
          uni.showToast({
            title: this.failTip?this.failTip:'验证失败',
            icon: 'none'
          });
          this.$emit("update:modelValue", false);
          this.$emit("change", false);
        }
      }
    }
  };
</script>
 
<style lang="scss" scoped>
  .diy-verify {
    --diy-verify-width:280px;
    --diy-verify-height:170px;
    --textColor:#4d4d4d;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    &.diy-verify-modal{
      position: fixed;
      top:0px;
      left:0px;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.6);
      z-index: 99999999;
      transition: all 0.3s ease-in-out 0s;
      
      .diy-verify-close{
        position: absolute;
        top:10px;
        right: 10px;
      }
      .diy-verify-wrap {
        opacity: 1;
        transition-duration: 0.3s;
        -ms-transform: scale(1);
        transform: scale(1);
        overflow-x: hidden;
        overflow-y: auto;
        pointer-events: auto;
      }
    }
 
    .diy-verify-wrap {
      display: flex;
      flex-direction: column;
      position: relative;
      margin: 0 auto;
      width: var(--diy-verify-width); 
      background-color: #ffffff;
 
      .diy-verify-tips {
        position: absolute;
        left:0;
        bottom: 0;
        width: 100%;
        background: rgba(0, 0, 0, .6);
        font-size: 12px;
        line-height: 20px;
        text-align: center;
 
        .diy-verify-tips-text {
          color: #ff0;
        }
      }
      .diy-verify-refresh{
        position: absolute;
        right: 10px;
        top: 10px;
      }
 
      .diy-verify-text{
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        color: #FFFFFF;
        text-align: center;
        background: -webkit-gradient(linear,left top,right top,color-stop(0,var(--textColor)),color-stop(.4,var(--textColor)),color-stop(.5,#fff),color-stop(.6,var(--textColor)),color-stop(1,var(--textColor)));
        animation: slidetounlock 3s infinite;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
      .diy-verify-success-text{
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        text-align: center;
        color: #FFFFFF;
      }
 
      @keyframes slidetounlock{
        0% {
          background-position: -200rpx 0;
        }
        100% {
          background-position: 200rpx 0;
        }
      }
      .diy-verify-box {
        position: relative;
        width: var(--diy-verify-width);
        height: var(--diy-verify-height);
        overflow: hidden;
 
        .diy-verify-img {
          width: var(--diy-verify-width);
          height: var(--diy-verify-height);
          border-radius: 0px;
        }
 
        .diy-verify-block-verify,
        .diy-verify-block-move,
        .diy-verify-block-touch {
          position: absolute;
          left: 0px;
          top: 0;
          border-radius: 0px;
        }
 
        .diy-verify-block-verify {
          border:1px solid #fff;
        }
      }
 
      .diy-verify-verify {
        height:40px;
        width: var(--diy-verify-width);
        background-color: rgba(0,0,0,0.07);
        position: relative;
        overflow: hidden;
        .diy-verify-verify-move{
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .diy-verify-verify-move,
        .diy-verify-verify-touch {
          border-radius: 0px;
        }
  
        .diy-verify-verify-move,.diy-verify-verify-touch {
          position: absolute;
          left: 0px;
          top: 0px;
        }
      }
    }
  }
</style>

七、组件使用

<template>
  <view class="container container23285">
    <view class="diygw-col-24">
      <diy-verify v-model="verify" successBarColor="#ff3d0c"></diy-verify>
    </view>
    <view class="diygw-col-24">
      <diy-verifyimg class="diygw-col-24" v-model="verifyimg" :verifySize="50" verifyImg="/static/pic1.jpg" :showBottomVerify="true"></diy-verifyimg>
    </view>
    <view class="clearfix"></view>
  </view>
</template>
 
<script>
  export default {
    data() {
      return {
        //用户全局信息
        userInfo: {},
        //页面传参
        globalOption: {},
        //自定义全局变量
        globalData: { logintype: '0', agree: '0' },
        verify: false,
        verifyimg: false
      };
    },
    onShow() {
      this.setCurrentPage(this);
    },
    onLoad(option) {
      this.setCurrentPage(this);
      if (option) {
        this.setData({
          globalOption: this.getOption(option)
        });
      }
 
      this.init();
    },
    methods: {
      async init() {}
    }
  };
</script>
 
<style lang="scss" scoped>
  .container23285 {
  }
</style>

UniApp手机滑块验证组件代码生成器