一、创建自定义组件MoveVerify

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

verification-puzzle.json

{"component": true,"usingComponents": {}
}

verification-puzzle.wxml

<view class='pathway' bindtouchend='onEnd' id='pathway'><view class="tips"><text wx:if="{{isOk}}" style="color: #FFFFFF;">验证通过</text><!-- <text wx:else>拖动滑块验证</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>

verification-puzzle.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;
}

二、在index页面使用

index.wxml

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

index.js

// pages/test/test/test.js
Page({/*** 页面的初始数据*/data: {},verificationResult() {console.log("验证通过");},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {// this.randomVerification()},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})

index.json

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

微信小程序-登陆注册滑块验证相关推荐

微信小程序手机号注册获取验证码+验证判断
微信小程序手机号注册获取验证码+验证判断扫描二维码,进入首页,找到"小程序演示",效果类->手机号码注册效果,点击进入即可.
微信小程序登录注册——云开发
微信小程序登录注册页面_云开发_调用云数据库源代码下载https://download.csdn.net/download/lujiebin/11241027 1.界面展示 2.代码 1.云开发初始 ...
PHP —— 用 ThinkPHP5.0 实现微信小程序登陆
PHP -- 用 ThinkPHP5.0 实现微信小程序登陆 <工欲善其事,必先利其器> 大家好,之前学习了原生 PHP 和框架,今天我们运用框架 TP5.0 来实现一下微信小程序的用户 ...
新手入门微信小程序-从注册到开发（校庆头像框）
微信公众号:数学建模与人工智能 GitHub - QInzhengk/Math-Model-and-Machine-Learning 展示效果: 最近从网上找了一个开源的生成和校庆有关的微信头像小程 ...
微信小程序插件---表单验证篇
微信小程序插件---表单验证篇项目下载地址 WxValidate - 表单验证插件介绍该插件是参考 jQuery Validate 封装的,为小程序表单提供了一套常用的验证规则,包括手机号码.电 ...
微信小程序登陆凭证校验出现{errcode:40029,errmsg:invalid code, hints: [ req_id: weh8ka0297hc58 ]}
问题描述: 微信小程序登陆校验时需要使用临时登录凭证code ,appID和appsecret获取 session_key 和 openid 等.但是后台向微信服务器请求时一直报{"errc ...
微信小程序——登陆凭证校验报错{errcode:40029,errmsg:invalid code, hints: [ req_id: weh8ka0297hc58 ]}
微信小程序登陆校验时需要使用临时登录凭证code ,appID和appsecret来向微信服务接口来获取 session_key 和 openid .但是后台向微信服务器请求时得到的一直是{" ...
微信小程序中的正则验证、手机号验证随笔
微信小程序中的正则验证.手机号验证随笔需求:小程序开发中的表单提交,涉及到手机号验证,必填项验证等问题微信小程序中不通过操作DOM节点来实现验证,因此绝了我想要通过节点直接获取值进行验证的想法 $ ...
小程序登陆注册功能的实现
我们在开发小程序时,难免会用到登陆注册功能.通常小程序有为我们提供用户授权登陆的功能,但是这个只能获取用户的头像和昵称,我们该怎么样来实现小程序账号密码的注册和登陆呢,今天就来手把手的带大家学习小程序 ...

微信小程序-登陆注册滑块验证

微信小程序-登陆注册滑块验证

一、创建自定义组件MoveVerify

二、在index页面使用

微信小程序-登陆注册滑块验证相关推荐

最新文章

热门文章