微信小程序实现登陆注册滑块验证
作者:XJ_18335388352 发布时间:2023-08-24 17:36:26
标签:微信小程序,登陆,验证
本文实例为大家分享了微信小程序实现登陆注册滑块验证的具体代码,供大家参考,具体内容如下
一、创建自定义组件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://blog.csdn.net/XJ_18335388352/article/details/120723366
![](https://www.aspxhome.com/images/zang.png)
![](https://www.aspxhome.com/images/jiucuo.png)
猜你喜欢
- Oracle是目前应用最广泛的数据库系统。一个完整的数据库系统包括系统硬件、操作系统、网络层、DBMS(数据库管理系统)、应用程序与数据,各
- asp之家注:有时候我们想让程序运行变慢下来,asp中该怎么做呢?原理很简单就是在运行程序前运行一段无关紧要的程序就可以了,要实现加长程序的
- javascript编写的窗口代码,可以关闭显示窗口,可以最小化或还原窗口大小,还可以鼠标移动窗口,不错的一个功能。截图如下:<htm
- 他们是如何不让我的Teleport和Webzip工作的?你也可以做得到哦: <%dim UserAgentUser
- 前几天,为了增强本站的SEO,着手把另一个域名:www.aspxhome.com下的所有页面301转向到www.cidianwang.com
- 如何剔除HTML标识?这里没有使用正则表达式来去除,当然大家用正则"<.+?>"也可以实现这个功能只留下干净
- 前言在启动 Django 项目时,Django 默认监听的端口号为 8000,设置的默认 IP 地址为 127.0.0.1 。如果需要修改默
- 段正淳的css笔记(1)分类之间的横竖线:试想过总结出这几年来写css与xhtml的经验 ,汇总成一片”旷世奇文”分享给大家。无奈寡人年世已
- 不论是企业网站、个人博客,或者购物网站、游戏网站,我们都希望能吸引访问者并且给他们留下愉快的访问体验。可用性是用户体验的一种度量,它可以用访
- 本文实例讲述了python字典序问题,分享给大家供大家参考。具体如下:问题描述:将字母从左向右的次序与字母表中的次序相同,且每个字符最大出现
- 在VBScript中,有一个On Error Resume Next语句,它使脚本解释器忽略运行期错误并继续脚本代码的执行。接着该脚本可以检
- 在IE6中背景属性加 a 与 a:hover 两者的伪类结合,在正常逻辑下为何不起作用?测试这问题存在IE6及以下浏览器,这问题我经常遇到在
- 打开网页,然后将javascript:document.body.contentEditable='true';
- 1. 排名函数与PARTITION BY --所有数据 SELECT * FROM dbo.student AS a INNER JOIN
- 我看见朋友可以把数据库的记录输出到页面表格上去,觉得很有用。这是怎么做的啊?见下:dbtable.asp<html><he
- 因AJAX接受数据时服务器默认是采用UTF-8的编码形式进行传送,所以在很多GB2312中文网页中应用AJAX回传数据经常会发生中文乱码。解
- 摘要:本文介绍了有关数据表的优化技巧,主要内容有,选择表的类型,打开尽量少的表,锁定表与查询速度的关系以及如何优化表以达到提高查询速度的目的
- 很多jsp程序员都遇到过这样的情况,jsp页面传递参数到servlet,只要参数有中文就是乱码,且大多数是??????乱码,尝试了网上比较普
- 由于XML本身的诸多优点,XML技术已被广泛的使用,目前的好多软件技术同XML紧密相关,比如微软的.net 平台对xml提供了强大的支持,提
- sql server中变量要先申明后赋值:局部变量用一个@标识,全局变量用两个@(常用的全局变量一般都是已经定义好的);申明局部变量语法:d