小程序拖动滑块验证（自定义组件插件分享）

柔光的暖阳◎ 2021-12-09 23:34 744阅读 0赞

效果图：

![20190714221136963.gif][]

**文章目录：**

\#1 创建组件

\#2 组件编码

MoveVerify.wxss

MoveVerify.wxml

MoveVerify.js

\#3 页面引用

在页面的 json 文件中引用组件

在页面的 wxml 文件中使用组件

在页面的 js 文件中接收验证回调

--------------------

## \#1 创建组件 ##

1.  在小程序项目根目录创建目录 components，再在 components 目录中创建 MoveVerify 目录
2.  在 MoveVerify 目录中 新建Component（该命令在 鼠标右键的快捷菜单中），以 MoveVerify 命名

最终得到的文件目录如下图所示：

![20190714214954824.png][]

## \#2 组件编码 ##

### MoveVerify.wxss ###

/* components/MoveVerify.wxss */
    .pathway {
      height: 80rpx;
      width: 100%;
      background-color: #7ac23c;
      position: relative;
      overflow: hidden;
    }
    
    .pathway .tips {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      line-height: 80rpx;
      text-align: center;
      color: #666;
      font-size: 32rpx;
      z-index: 3;
    }
    
    .pathway .track {
      position: absolute;
      top: 0;
      left: 0;
      background-color: #eee;
      width: 100%;
      height: 100%;
      padding-left: 0;
      box-sizing: content-box;
      transform: translateX(0);
    }
    
    .pathway movable-area {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      background: none;
      z-index: 5;
    }
    
    .pathway movable-view {
      height: 100%;
      width: 100rpx;
      box-sizing: border-box;
      background-color: #fff;
      border: #ddd solid 1px;
      background-position: center;
      background-repeat: no-repeat;
      background-size: auto 32rpx;
      background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo0ZDhlNWY5My05NmI0LTRlNWQtOGFjYi03ZTY4OGYyMTU2ZTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NTEyNTVEMURGMkVFMTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NTEyNTVEMUNGMkVFMTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo2MTc5NzNmZS02OTQxLTQyOTYtYTIwNi02NDI2YTNkOWU5YmUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NGQ4ZTVmOTMtOTZiNC00ZTVkLThhY2ItN2U2ODhmMjE1NmU2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+YiRG4AAAALFJREFUeNpi/P//PwMlgImBQkA9A+bOnfsIiBOxKcInh+yCaCDuByoswaIOpxwjciACFegBqZ1AvBSIS5OTk/8TkmNEjwWgQiUgtQuIjwAxUF3yX3xyGIEIFLwHpKyAWB+I1xGSwxULIGf9A7mQkBwTlhBXAFLHgPgqEAcTkmNCU6AL9d8WII4HOvk3ITkWJAXWUMlOoGQHmsE45ViQ2KuBuASoYC4Wf+OUYxz6mQkgwAAN9mIrUReCXgAAAABJRU5ErkJggg==");
    }
    
    .pathway movable-view.active {
      border: #7ac23c solid 1px;
      background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo0ZDhlNWY5My05NmI0LTRlNWQtOGFjYi03ZTY4OGYyMTU2ZTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDlBRDI3NjVGMkQ2MTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDlBRDI3NjRGMkQ2MTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDphNWEzMWNhMC1hYmViLTQxNWEtYTEwZS04Y2U5NzRlN2Q4YTEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NGQ4ZTVmOTMtOTZiNC00ZTVkLThhY2ItN2U2ODhmMjE1NmU2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+k+sHwwAAASZJREFUeNpi/P//PwMyKD8uZw+kUoDYEYgloMIvgHg/EM/ptHx0EFk9I8wAoEZ+IDUPiIMY8IN1QJwENOgj3ACo5gNAbMBAHLgAxA4gQ5igAnNJ0MwAVTsX7IKyY7L2UNuJAf+AmAmJ78AEDTBiwGYg5gbifCSxFCZoaBMCy4A4GOjnH0D6DpK4IxNSVIHAfSDOAeLraJrjgJp/AwPbHMhejiQnwYRmUzNQ4VQgDQqXK0ia/0I17wJiPmQNTNBEAgMlQIWiQA2vgWw7QppBekGxsAjIiEUSBNnsBDWEAY9mEFgMMgBk00E0iZtA7AHEctDQ58MRuA6wlLgGFMoMpIG1QFeGwAIxGZo8GUhIysmwQGSAZgwHaEZhICIzOaBkJkqyM0CAAQDGx279Jf50AAAAAABJRU5ErkJggg==");
    }
    
    .pathway .disabled {
      position: absolute;
      z-index: 10;
      height: 100%;
      width: 100%;
      top: 0;
      left: 0;
    }

### MoveVerify.wxml ###

<view class='pathway' bindtouchend='onEnd' id='pathway'>
        <view class="tips">
            <text wx:if="{
       {isOk}}" style="color: #FFFFFF;">验证通过</text>
            <text wx:else>拖动滑块验证</text>
        </view>
        <view class="track" style="transform:translateX({
       {oldx}}px)"></view>
        <movable-area>
            <movable-view x="{
       {x}}"  direction="horizontal" 
                bindchange="onChange"  
                class='{
       {isOk ? "active":""}}' 
                id="track">
            </movable-view>
        </movable-area>
        <view class="disabled" wx:if="{
       {isOk}}"></view>
    </view>

### MoveVerify.js ###

Component({
      /**
       * 组件的属性列表
       */
      properties: {
    
      },
    
      /**
       * 组件的初始数据
       */
      data: {
        x: 0,
        oldx: 0,
        isOk: false,
        size: {}
      },
      ready(){
        let getSize = (selector) => {
          return new Promise((resolve, reject) => {
            let view = wx.createSelectorQuery().in(this).select(selector);
            view.fields({
              size: true,
            }, (res) => {
              resolve(res.width);
            }).exec();
          });
        }
        getSize("#pathway").then((res1) => {
          this.data.size.pathway = res1;
          getSize("#track").then((res2) => {
            this.data.size.track = res2;
          });
        })
      },
      /**
       * 组件的方法列表
       */
      methods: {
        onChange(e){
          this.setData({
            oldx: e.detail.x
          })
        },
        onEnd(){
          if (this.data.isOk) {
            return;
          }
          if ((this.data.oldx + 1) > (this.data.size.pathway - this.data.size.track)) {
            this.setData({
              isOk:true
            },()=>{
              this.triggerEvent('result');
            });
          } else {
            this.setData({
              x: 0,
              oldx: 0
            })
          }
        }
      }
    })

## \#3 页面引用 ##

### 在页面的 json 文件中引用组件 ###

{
      "usingComponents": {
        "move-verify": "/components/MoveVerify/MoveVerify"
      }
    }

### 在页面的 wxml 文件中使用组件 ###

<move-verify bind:result="verifyResult"></move-verify>

### 在页面的 js 文件中接收验证回调 ###

Page({
        data:{
            isFlag:false
        },
        verifyResult(){
            console.log("验证通过");
            this.setData({
                isFlag:true
            })
        }
    })

> 作者：[黄河爱浪][Link 1] QQ：1846492969，邮箱：helang.love@qq.com
> 
> 公众号：`web-7258`，本文原创，著作权归作者所有，转载请注明原链接及出处。
> 
> 更多精彩文章，请扫下方二维码关注我的公众号
> 
> ![20190512094840637.jpg][]

[20190714221136963.gif]: /images/20211209/0ec91b1dd98f44f69430b6f194269d95.png
[20190714214954824.png]: /images/20211209/b070976946434e198081d4e9b90bebfc.png
[Link 1]: https://blog.csdn.net/u013350495
[20190512094840637.jpg]: /images/20211209/c7a84ef07814420a84bf217e3302f521.png