本文记录微信小程序实现滑块验证。
前言
最近做小程序的时候有个需求要求用户登录之前需要滑块验证，这个在很多网页上面也有使用防止模拟登录或者限制登录频率。
本文记录实现的思路，基本的思路是使用微信提供的movable-area配合movable-view。
具体的使用方法参考文档。 实现步骤如下：
- 记录滑动的
x并且判断x是否到达了滑动的边界，如果未到边界则将x置为0，反之设为边界的x。
最简单的效果图如下：
如果稍加修饰的话，可实现下面的效果：
本文以最简单的效果为例。
wxml
1
2
3
4
5
6
7
<view class="container">
<movable-area class="move-area">
<movable-view class="move-view" inertia="true" damping="35" x="" direction="horizontal" bindchange="onBlockMove" bindtouchend="onBlockMoveEnd">
</movable-view>
</movable-area>
<button class="btn" type="primary" bindtap="resetBlock">重置</button>
</view>
wxss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.move-area{
width: 100%;
height: 98rpx;
background-color: #e8f0fc;
}
.move-view{
width: 98rpx;
height: 98rpx;
background-color: #1b6fe1;
}
.btn{
width: 100%;
margin-top: 90rpx;
}
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
Page({
/**
* 页面的初始数据
*/
data: {
movedX: 0,
blockMovedX: 0,
moveBlockWidth: 0,
moveAreaWidth: 0
},
onBlockMove(e) {
let moveX = e.detail.x;
this.setData({
movedX: moveX
})
},
onBlockMoveEnd() {
let areaWidth = this.data.moveAreaWidth;
let blockWidth = this.data.moveBlockWidth;
let isFinished = this.data.isFinished;
if (areaWidth == 0 || blockWidth == 0 || isFinished) {
return;
}
let maxX = areaWidth - blockWidth;
if (this.data.movedX < maxX) {
this.setData({
blockMovedX: 0
})
} else {
this.setData({
blockMovedX: maxX
})
wx.showToast({
title: '验证成功',
icon: "none"
})
}
},
resetBlock() {
this.setData({
blockMovedX: 0
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
var query = wx.createSelectorQuery();
var self = this;
query.select('.move-area').boundingClientRect(function(rect) {
self.setData({
moveAreaWidth: rect.width
})
}).exec();
query.select('.move-view').boundingClientRect(function(rect) {
self.setData({
moveBlockWidth: rect.width,
})
}).exec();
}
})
总结
实现效果比较简单，如果有特殊需求的话按照微信提供的文档自己进行二次开发比较容易实现。
