微信小程序滑塊驗(yàn)證實(shí)現(xiàn)方法
更新時(shí)間：2022年01月07日 16:35:10 作者：前端江太公
這篇文章主要介紹了微信小程序滑塊驗(yàn)證方法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
下面給大家介紹下微信小程序滑塊驗(yàn)證的效果圖及實(shí)例代碼：
如圖：
滑塊驗(yàn)證組件
puzzleVerify目錄
index.wxml
<!-- 滑動(dòng)驗(yàn)證彈窗 -->
<view class="slide_model" wx:if="{{slidebel}}">
<view class="slide_wrapper">
<!-- 拼圖圖片部分 -->
<view class="canvas_img" id="canvas_img">
<!-- 背景圖片 -->
<canvas style="width: {{canvas_width}}px; height: {{canvas_width * 13 / 28}}px;" canvas-id="firstCanvas" id="firstCanvas"></canvas>
<!-- 被摳方塊 -->
<cover-view class="canvas_view" style="left:{{canfile_x}}px;top:{{canfile_y}}px;"></cover-view>
<!-- 可移動(dòng)空格 -->
<cover-image class="canfile_image"
style="top:{{canfile_y}}px;left:{{slide_clientX > canvas_width-50 ? canvas_width-50 : slide_clientX}}px;"
src="{{canfile_image}}"></cover-image>
</view>
<!-- 滑塊 -->
<view class="canvas_slide">
<view class="canvas_width"
style="width:{{slide_clientX > canvas_width-50?canvas_width-50:slide_clientX}}px;{{slide_status == 2?'background:#52CCBA;':''}}{{slide_status == 3?'background:#F57A7A;':''}}">
</view>
<view class="canvas_kus" bindtouchstart="slide_start" bindtouchmove="slide_hmove" bindtouchend="slide_chend"
style="left:{{slide_clientX > canvas_width-50?canvas_width-50:slide_clientX}}px; {{slide_status == 0?'color: #333;':''}} {{slide_status == 1?'background:#1991FA;':''}} {{slide_status == 2?'background:#52CCBA;':''}} {{slide_status == 3?'background:#F57A7A;':''}}">
<view wx:if="{{slide_status < 2}}"
style="background-image: {{slide_status==0?'url(/imgs/puzzle-uncheck.png)':'url(/imgs/puzzle-uncheck2.png)'}}">
</view>
<view wx:if="{{slide_status == 2}}">
<image src="/imgs/puzzle-checked.png" mode="aspectFit"
style="width:40rpx;height:40rpx;margin-top:10px;">
</image>
</view>
<view wx:if="{{slide_status == 3}}">
<image src="/imgs/puzzle-fail.png" mode="aspectFit"
style="width:40rpx;height:40rpx;margin-top:10px;">
</image>
</view>
</view>
<view wx:if="{{slide_status == 0 || slide_status == 1}}">拖動(dòng)左邊滑塊完成上方拼圖</view>
</view>
<!-- 底部按鈕 -->
<view class="canvas_guil">
<image bindtap="visidlisd" class="footer-icon" src="/imgs/puzzle-close.png"
style="width: 50rpx; height: 50rpx;"></image>
<image bindtap="slide_tap" class="footer-icon" src="/imgs/puzzle-fresh.png"
style="width: 48rpx; height: 48rpx;"></image>
</view>
</view>
</view>
index.wxss
/* 拼圖滑動(dòng)驗(yàn)證 */
.slide_model {
width: 100%;
height: 100vh;
z-index: 999;
position: fixed;
left: 0;
top: 0;
background: rgba(0, 0, 0, 0.4);
display: flex;
align-items: center;
justify-content: center;
}
.slide_wrapper {
float: left;
z-index: 1;
position: relative;
width: 90%;
background-color: #fff;
}
.canvas_img {
width: 90%;
min-height: 150px;
position: relative;
margin: 25rpx auto 0;
}
#firstCanvas {
z-index: 1 !important;
width: 100%;
height: 100%;
}
/* 被摳的空格 */
.canvas_view {
width: 50px;
height: 50px;
position: absolute;
background: rgba(0, 0, 0, 0.6);
z-index: 2;
box-shadow: 0 0 5px 2px rgba(255, 255, 255, 0.5);
}
/* 移動(dòng)的空格 */
.canfile_image {
width: 50px;
height: 50px;
position: absolute;
left: 0;
z-index: 3;
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.8);
box-sizing: border-box;
}
.canfile_image::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
box-shadow: 0 0 8px 5px rgba(255, 255, 255, 0.8) inset;
}
.canvas_slide {
width: 90%;
height: 45px;
background: #eee;
text-align: center;
line-height: 80rpx;
margin: 0 auto;
position: relative;
font-size: 26rpx;
}
/* 滑條上滑塊經(jīng)過的部分 */
.canvas_width {
position: absolute;
left: 0;
top: 0;
height: 45px;
background-color: #1991FA;
width: 0;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}
/* 滑塊 */
.canvas_kus {
width: 48px;
height: 45px;
background-color: #fff;
font-size: 36rpx;
font-weight: 700;
position: absolute;
left: 0;
top: 0;
border: 1px solid #ddd;
color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
.canvas_kus>view {
width: 100%;
height: 100%;
background-position: center;
background-size: 50% 40%;
background-repeat: no-repeat;
}
/* 底部按鈕位置 */
.canvas_guil {
width: 100%;
border-top: 1px solid #f4f4f4;
height: 100rpx;
display: flex;
align-items: center;
float: left;
font-size: 30rpx;
color: #666;
}
.canvas_guil>image {
margin-left: 30rpx;
}
index.js
Component({
/**
* 組件的屬性列表
*/
properties: {
sildeBlockCont: { //接受父組件值
type: String
}
},
/**
* 組件的初始數(shù)據(jù)
*/
data: {
canvas_width: 0,
slidebel: false, //滑動(dòng)彈窗
canfile_image: '', //裁剪圖片
canfile_x: '', //被摳方塊的水平位置
canfile_y: '', //被摳方塊的垂直位置
slide_clientX: 0, //移動(dòng)位置
slide_status: 0, //0 停止操作 1 觸發(fā)長(zhǎng)按 2 正確 3 錯(cuò)誤
},
/**
* 組件的方法列表
*/
methods: {
// 彈窗
visidlisd(e) {
var that = this
this.setData({
slidebel: !this.data.slidebel
})
if (this.data.slidebel) {
if (this.data.canvas_width != 0) {
this.slide_tap()
return
}
wx.nextTick(() => {
let query = this.createSelectorQuery()
query.select('#canvas_img').boundingClientRect(function (rect) {
that.setData({
canvas_width: rect.width
})
that.slide_tap()
}).exec()
})
}
},
// 畫布
slide_tap(e) {
var that = this
var imgIndex = Math.round(Math.random() * 13 + 1)
that.setData({
canfile_x: Math.round(Math.random() * (this.data.canvas_width - 120) + 60),
canfile_y: Math.round(Math.random() * (this.data.canvas_width * 13 / 28 - 60)),
canfile_image: ''
})
setTimeout(function () {
var context = wx.createCanvasContext('firstCanvas', that)
context.width = that.data.canvas_width
context.height = that.data.canvas_width * 13 / 28
// /imgs/puzzle-bg-${imgIndex}.jpg 為滑塊背景圖 從靜態(tài)資源獲取 如從接口獲取可從that.properties.properties拿
context.drawImage(`/imgs/puzzle-bg-${imgIndex}.jpg`, 0, 0, context.width, context.height)
context.draw(false, (() => {
wx.canvasToTempFilePath({
x: that.data.canfile_x,
y: that.data.canfile_y,
width: 50,
height: 50,
canvasId: 'firstCanvas',
success: function (res) {
that.setData({
canfile_image: res.tempFilePath
})
}
}, that);
}))
}, 50)
},
// 滑動(dòng)開始
slide_start(e) {
this.setData({
slide_status: 1
})
},
// 滑動(dòng)中
slide_hmove(e) {
this.setData({
slide_clientX: (e.touches[0].clientX - 60) < 1 ? 0 : (e.touches[0].clientX - 60)
})
},
//滑動(dòng)結(jié)束
slide_chend(e) {
var that = this
var cliextX;
var maxX = this.data.canvas_width - 60
if (that.data.slide_clientX < 1) {
that.data.slide_status = 0
return false
}
if (that.data.slide_clientX > maxX) {
cliextX = maxX
} else {
cliextX = that.data.slide_clientX
}
if (((that.data.canfile_x + 5) > cliextX) && ((that.data.canfile_x - 5) < cliextX)) {
that.setData({
slide_status: 2,
slide_clientX: that.data.canfile_x,
})
setTimeout(function () {
that.setData({
slidebel: false,
})
}, 500)
wx.showToast({
icon: 'success',
title: '驗(yàn)證成功',
})
that.triggerEvent('puzzleVerify')
} else {
that.setData({
slide_status: 3,
})
}
setTimeout(function () {
that.setData({
slide_status: 0,
slide_clientX: 0,
})
}, 500)
},
},
lifetimes: {
created() {
// 在組件實(shí)例剛剛被創(chuàng)建時(shí)執(zhí)行
},
ready() {
// 在組件在視圖層布局完成后執(zhí)行
// console.log(this.properties.sildeBlockCont);
},
}
})
index.json
{
"component": true,
"usingComponents": {}
}
父組件調(diào)用滑塊
json
"usingComponents": {
"puzzleVerify": "/components/puzzleVerify/index"
}wxml
<button bindtap="getCode"></button>
<puzzleVerify id="puzzleVerify" bind:puzzleVerify="countDown" sildeBlockCont="{{sildeBlockCont}}"></puzzleVerify>
js
data: {
sildeBlockCont: '', //滑塊背景圖
},
onReady: function () {
this.puzzleVerify = this.selectComponent("#puzzleVerify")
},
getCode() {
this.puzzleVerify.visidlisd()
},
// 滑塊驗(yàn)證成功操作
countDown() {}
滑塊含有靜態(tài)圖片，完整代碼和靜態(tài)圖片資源已上傳鏈接: 微信小程序滑塊驗(yàn)證源碼.
到此這篇關(guān)于微信小程序滑塊驗(yàn)證方法的文章就介紹到這了,更多相關(guān)微信小程序滑塊驗(yàn)證內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
- 微信小程序?qū)崿F(xiàn)帶滑塊的進(jìn)度條
- 微信小程序?qū)崿F(xiàn)滑塊驗(yàn)證
- 微信小程序?qū)崿F(xiàn)登陸注冊(cè)滑塊驗(yàn)證
- 微信小程序swiper-dot中的點(diǎn)如何改成滑塊詳解
- 微信小程序12行js代碼自己寫個(gè)滑塊功能(推薦)
- 微信小程序之導(dǎo)航滑塊視圖容器功能的實(shí)現(xiàn)代碼(簡(jiǎn)單兩步)
- 微信小程序?qū)崿F(xiàn)帶刻度尺滑塊功能
- 微信小程序 開發(fā)之滑塊視圖容器(swiper)詳解及實(shí)例代碼
- 微信小程序?qū)崿F(xiàn)滑動(dòng)驗(yàn)證拼圖
- 微信小程序?qū)崿F(xiàn)拼圖游戲
- 微信小程序?qū)崿F(xiàn)拼圖小游戲
- 微信小程序?qū)崿F(xiàn)的數(shù)字滑塊拼圖效果
相關(guān)文章
js數(shù)組如何添加json數(shù)據(jù)及js數(shù)組與json的區(qū)別
在JSON中，有兩種數(shù)據(jù)結(jié)構(gòu)：對(duì)象和數(shù)組。本篇文章給大家介紹js數(shù)組如何添加json數(shù)據(jù)以及js數(shù)組和json的區(qū)別，涉及到j(luò)s json數(shù)組添加相關(guān)知識(shí)，感興趣的朋友可以參考下本篇文章2015-10-10
JS實(shí)現(xiàn)簡(jiǎn)單短信驗(yàn)證碼界面
要實(shí)現(xiàn)短信驗(yàn)證碼界面，首先要有一個(gè)文本框，旁邊是按鈕，點(diǎn)擊時(shí)開始倒計(jì)時(shí)。接下來通過本文給大家分享js實(shí)現(xiàn)簡(jiǎn)單短信驗(yàn)證碼界面，感興趣的朋友參考下吧2017-08-08
JS 實(shí)現(xiàn)隨機(jī)驗(yàn)證碼功能
驗(yàn)證碼驗(yàn)證是網(wǎng)頁常出現(xiàn)的一個(gè)驗(yàn)證點(diǎn)，所謂驗(yàn)證碼類型有很多，下面代碼只是實(shí)現(xiàn)一個(gè)簡(jiǎn)單的驗(yàn)證功能，需要的朋友參考下2017-02-02
js如何實(shí)現(xiàn)小程序wx.arrayBufferToBase64方法實(shí)例
這篇文章主要給大家介紹了關(guān)于js如何實(shí)現(xiàn)小程序wx.arrayBufferToBase64方法的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-03-03
這篇文章主要介紹了javascript中sort()的用法,實(shí)例分析了sort()的功能、定義及使用技巧,需要的朋友可以參考下2015-01-01
因項(xiàng)目開發(fā)需要，須將每一個(gè)方法都獨(dú)立成單獨(dú)的js文件以便載入、維護(hù)，所以，必須需要有一個(gè)控制器用于載入這些方法。2010-07-07
這篇文章主要介紹了JavaScript迭代器的含義及用法,迭代器就是為實(shí)現(xiàn)對(duì)不同集合進(jìn)行統(tǒng)一遍歷操作的一種機(jī)制，只要給需要遍歷的數(shù)據(jù)結(jié)構(gòu)部署Iterator接口，通過調(diào)用該接口，或者使用消耗該接口的API實(shí)現(xiàn)遍歷操作。,需要的朋友可以參考下2019-06-06
驗(yàn)證碼圖片顯示的時(shí)候，后面沒有加隨機(jī)參數(shù)導(dǎo)致在ie里面，怎么按回車都不變，顯示的是同樣的驗(yàn)證碼,火狐沒有發(fā)現(xiàn)這個(gè)bug2013-03-03
JavaScript實(shí)現(xiàn)重置表單（reset）的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)重置表單（reset）的方法,涉及javascript中reset()方法的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-04-04
javascript FAQ函數(shù)(提問+回復(fù))
javascript FAQ函數(shù)，當(dāng)點(diǎn)擊問題時(shí)顯示下面的回復(fù)內(nèi)容。2009-07-07