0
0

微信小程序滑块验证方法

在这里插入图片描述

如图：
在这里插入图片描述

滑块验证组件

  1. puzzleVerify

目录
在这里插入图片描述

  1. index.wxml
  1. <!-- 滑动验证弹窗 --><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><!-- 可移动空格 --><cover-image class="canfile_image"
  2.                 style="top:{{canfile_y}}px;left:{{slide_clientX > canvas_width-50 ? canvas_width-50 : slide_clientX}}px;"
  3.                 src="{{canfile_image}}"></cover-image></view><!-- 滑块 --><view class="canvas_slide"><view class="canvas_width"
  4.                 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"
  5.                 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}}"
  6.                     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"
  7.                         style="width:40rpx;height:40rpx;margin-top:10px;"></image></view><view wx:if="{{slide_status == 3}}"><image src="/imgs/puzzle-fail.png" mode="aspectFit"
  8.                         style="width:40rpx;height:40rpx;margin-top:10px;"></image></view></view><view wx:if="{{slide_status == 0 || slide_status == 1}}">拖动左边滑块完成上方拼图</view></view><!-- 底部按钮 --><view class="canvas_guil"><image bindtap="visidlisd"class="footer-icon" src="/imgs/puzzle-close.png"
  9.                 style="width: 50rpx; height: 50rpx;"></image><image bindtap="slide_tap"class="footer-icon" src="/imgs/puzzle-fresh.png"
  10.                 style="width: 48rpx; height: 48rpx;"></image></view></view></view>
  1. index.wxss
  1. /* 拼图滑动验证 */.slide_model {
  2.   width:100%;
  3.   height:100vh;
  4.   z-index:999;
  5.   position: fixed;
  6.   left:0;
  7.   top:0;
  8.   background:rgba(0,0,0,0.4);
  9.   display: flex;
  10.   align-items: center;
  11.   justify-content: center;}.slide_wrapper {
  12.   float: left;
  13.   z-index:1;
  14.   position: relative;
  15.   width:90%;
  16.   background-color: #fff;}.canvas_img {
  17.   width:90%;
  18.   min-height:150px;
  19.   position: relative;
  20.   margin:25rpx auto 0;}
  21. #firstCanvas {
  22.   z-index:1!important;
  23.   width:100%;
  24.   height:100%;}/* 被抠的空格 */.canvas_view {
  25.   width:50px;
  26.   height:50px;
  27.   position: absolute;
  28.   background:rgba(0,0,0,0.6);
  29.   z-index:2;
  30.   box-shadow:005px 2px rgba(255,255,255,0.5);}/* 移动的空格 */.canfile_image {
  31.   width:50px;
  32.   height:50px;
  33.   position: absolute;
  34.   left:0;
  35.   z-index:3;
  36.   box-shadow:0px 0px 15px rgba(0,0,0,0.8);
  37.   box-sizing: border-box;}.canfile_image::before {
  38.   content:"";
  39.   position: absolute;
  40.   width:100%;
  41.   height:100%;
  42.   box-shadow:008px 5px rgba(255,255,255,0.8) inset;}.canvas_slide {
  43.   width:90%;
  44.   height:45px;
  45.   background: #eee;
  46.   text-align: center;
  47.   line-height:80rpx;
  48.   margin:0 auto;
  49.   position: relative;
  50.   font-size:26rpx;}/* 滑条上滑块经过的部分 */.canvas_width {
  51.   position: absolute;
  52.   left:0;
  53.   top:0;
  54.   height:45px;
  55.   background-color: #1991FA;
  56.   width:0;
  57.   border-top:1px solid #ddd;
  58.   border-bottom:1px solid #ddd;}/* 滑块 */.canvas_kus {
  59.   width:48px;
  60.   height:45px;
  61.   background-color: #fff;
  62.   font-size:36rpx;
  63.   font-weight:700;
  64.   position: absolute;
  65.   left:0;
  66.   top:0;
  67.   border:1px solid #ddd;
  68.   color: #fff;
  69.   box-shadow:0010px rgba(0,0,0,0.3);}.canvas_kus>view {
  70.   width:100%;
  71.   height:100%;
  72.   background-position: center;
  73.   background-size:50%40%;
  74.   background-repeat: no-repeat;}/* 底部按钮位置 */.canvas_guil {
  75.   width:100%;
  76.   border-top:1px solid #f4f4f4;
  77.   height:100rpx;
  78.   display: flex;
  79.   align-items: center;
  80.   float: left;
  81.   font-size:30rpx;
  82.   color: #666;}.canvas_guil>image {
  83.   margin-left:30rpx;}
  1. index.js
  1. Component({/**
  2.      * 组件的属性列表
  3.      */
  4.     properties:{
  5.         sildeBlockCont:{//接受父组件值
  6.             type: String
  7.         }},/**
  8.      * 组件的初始数据
  9.      */
  10.     data:{
  11.         canvas_width:0,
  12.         slidebel:false,//滑动弹窗
  13.         canfile_image:'',//裁剪图片
  14.         canfile_x:'',//被抠方块的水平位置
  15.         canfile_y:'',//被抠方块的垂直位置
  16.         slide_clientX:0,//移动位置
  17.         slide_status:0,//0 停止操作   1 触发长按   2 正确   3 错误},/**
  18.      * 组件的方法列表
  19.      */
  20.     methods:{// 弹窗visidlisd(e){var that =thisthis.setData({
  21.                 slidebel:!this.data.slidebel
  22.             })if(this.data.slidebel){if(this.data.canvas_width !=0){this.slide_tap()return}
  23.                 wx.nextTick(()=>{let query =this.createSelectorQuery()
  24.                     query.select('#canvas_img').boundingClientRect(function(rect){
  25.                         that.setData({
  26.                             canvas_width: rect.width
  27.                         })
  28.                         that.slide_tap()}).exec()})}},// 画布slide_tap(e){var that =thisvar imgIndex = Math.round(Math.random()*13+1)
  29.             that.setData({
  30.                 canfile_x: Math.round(Math.random()*(this.data.canvas_width -120)+60),
  31.                 canfile_y: Math.round(Math.random()*(this.data.canvas_width *13/28-60)),
  32.                 canfile_image:''})setTimeout(function(){var context = wx.createCanvasContext('firstCanvas', that)
  33.                 context.width = that.data.canvas_width
  34.                 context.height = that.data.canvas_width *13/28//  /imgs/puzzle-bg-${imgIndex}.jpg  为滑块背景图 从静态资源获取  如从接口获取可从that.properties.properties拿
  35.                 context.drawImage(`/imgs/puzzle-bg-${imgIndex}.jpg`,0,0, context.width, context.height)
  36.                 context.draw(false,(()=>{
  37.                     wx.canvasToTempFilePath({
  38.                         x: that.data.canfile_x,
  39.                         y: that.data.canfile_y,
  40.                         width:50,
  41.                         height:50,
  42.                         canvasId:'firstCanvas',success:function(res){
  43.                             that.setData({
  44.                                 canfile_image: res.tempFilePath
  45.                             })}}, that);}))},50)},// 滑动开始slide_start(e){this.setData({
  46.                 slide_status:1})},// 滑动中slide_hmove(e){this.setData({
  47.                 slide_clientX:(e.touches[0].clientX -60)<1?0:(e.touches[0].clientX -60)})},//滑动结束slide_chend(e){var that =thisvar cliextX;var maxX =this.data.canvas_width -60if(that.data.slide_clientX <1){
  48.                 that.data.slide_status =0returnfalse}if(that.data.slide_clientX > maxX){
  49.                 cliextX = maxX
  50.             }else{
  51.                 cliextX = that.data.slide_clientX
  52.             }if(((that.data.canfile_x +5)> cliextX)&&((that.data.canfile_x -5)< cliextX)){
  53.                 that.setData({
  54.                     slide_status:2,
  55.                     slide_clientX: that.data.canfile_x,})setTimeout(function(){
  56.                     that.setData({
  57.                         slidebel:false,})},500)
  58.                 wx.showToast({
  59.                     icon:'success',
  60.                     title:'验证成功',})
  61.                 that.triggerEvent('puzzleVerify')}else{
  62.                 that.setData({
  63.                     slide_status:3,})}setTimeout(function(){
  64.                 that.setData({
  65.                     slide_status:0,
  66.                     slide_clientX:0,})},500)},},
  67.     lifetimes:{created(){// 在组件实例刚刚被创建时执行},ready(){// 在组件在视图层布局完成后执行// console.log(this.properties.sildeBlockCont);},}})
  1. index.json
  1. {"component":true,"usingComponents":{}}

父组件调用滑块

在这里插入图片描述

  1. json
  1. "usingComponents":{"puzzleVerify":"/components/puzzleVerify/index"}
  1. wxml
  1. <button  bindtap="getCode"></button><puzzleVerify id="puzzleVerify" bind:puzzleVerify="countDown" sildeBlockCont="{{sildeBlockCont}}"></puzzleVerify>
  1. js
  1.     data:{
  2.         sildeBlockCont:'',//滑块背景图},onReady:function(){this.puzzleVerify =this.selectComponent("#puzzleVerify")},getCode(){this.puzzleVerify.visidlisd()},// 滑块验证成功操作countDown(){}

滑块含有静态图片，完整代码和静态图片资源已上传链接: 微信小程序滑块验证源码.

如有疑问请与我联系

在这里插入图片描述

标签： 微信小程序 javascript 小程序
本文转载自: https://blog.csdn.net/ZiChen_Jiang/article/details/122322782
版权归原作者 前端江太公 所有， 如有侵权，请联系我们删除。
登录后发布评论

“微信小程序滑块验证方法”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？

文章导航
没有找到文章内容分段。。。