微信小程序滑块验证实现方法

下面给大家介绍下微信小程序滑块验证的效果图及实例代码:

如图:

滑块验证组件

puzzleVerify目录

index.wxml

<!-- 滑动验证弹窗 -->
<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"
				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}}">拖动左边滑块完成上方拼图</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

/* 拼图滑动验证 */
.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);
}
/* 移动的空格 */
.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;
}
/* 滑条上滑块经过的部分 */
.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
		}
	},
	/**
	 * 组件的初始数据
	 */
	data: {
		canvas_width: 0,
		slidebel: false, //滑动弹窗
		canfile_image: '', //裁剪图片
		canfile_x: '', //被抠方块的水平位置
		canfile_y: '', //被抠方块的垂直位置
		slide_clientX: 0, //移动位置
		slide_status: 0, //0 停止操作   1 触发长按   2 正确   3 错误
	},
	/**
	 * 组件的方法列表
	 */
	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  为滑块背景图 从静态资源获取  如从接口获取可从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)
		},
		// 滑动开始
		slide_start(e) {
			this.setData({
				slide_status: 1
			})
		},
		// 滑动中
		slide_hmove(e) {
			this.setData({
				slide_clientX: (e.touches[0].clientX - 60) < 1 ? 0 : (e.touches[0].clientX - 60)
			})
		},
		//滑动结束
		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: '验证成功',
				})
				that.triggerEvent('puzzleVerify')
			} else {
				that.setData({
					slide_status: 3,
				})
			}
			setTimeout(function () {
				that.setData({
					slide_status: 0,
					slide_clientX: 0,
				})
			}, 500)
		},
	},
	lifetimes: {
		created() {
			// 在组件实例刚刚被创建时执行
		},
		ready() {
			// 在组件在视图层布局完成后执行
			// console.log(this.properties.sildeBlockCont);
		},
	}
})

index.json

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

父组件调用滑块

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()
	},
	// 滑块验证成功操作
	countDown() {}

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

到此这篇关于微信小程序滑块验证方法的文章就介绍到这了,更多相关微信小程序滑块验证内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 微信小程序实现表单验证

    微信小程序的表单验证,供大家参考,具体内容如下 需要用到一个插件WxValidat.js 传送门 在需要使用的page js文件下导入 import WxValidate from '../../utils/WxValidate.js' 主要内容 WXML内容 <form bindsubmit="formSubmit"> <view class="weui-cells__title">用户名</view> <view cla

  • 微信小程序swiper-dot中的点如何改成滑块详解

    目录 背景 目标效果 思路 实现 swiper监听change 自定义dot模块 change事件中的逻辑 写在最后 本文主要介绍如何基于已有的组件(比如微信小程序的swiper,还有我们平时h5用的比较多的swiper.js等),实现一个滑块样式的指示面板.demo基于小程序,但是逻辑通用. 背景 最近要做一个新的小程序,在首页部分有一个swiper模块,因为设计同学的出色发挥

  • 微信小程序12行js代码自己写个滑块功能(推荐)

    效果图如下所示 .wxml <view class="jindu" bindtap="cuin"> <view class="xian" style="width:{{towards}}px;"> <view class="yuan" bindtouchmove='touchMove'></view> </view> </view> &

  • 微信小程序滑块验证实现方法

    下面给大家介绍下微信小程序滑块验证的效果图及实例代码: 如图: 滑块验证组件 puzzleVerify目录 index.wxml <!-- 滑动验证弹窗 --> <view class="slide_model" wx:if="{{slidebel}}"> <view class="slide_wrapper"> <!-- 拼图图片部分 --> <view class="canvas

  • 本地搭建微信小程序服务器的实现方法

    本地搭建微信小程序服务器的实现方法 现在开发需要购买服务器,价格还是有点贵的,可以花费小代价就可以搭建一个服务器,可以用来开发小程序,博客等. 1.域名(备案过的)  2.阿里云注册免费的https证书  3.配置本地的nginx  4.内网映射(本地安装wampserver 服务器) 一.域名 注册花生壳,开通内网映射需要8元(我开通时需要,现在不清楚还要不要),里面可以注册2个免费的域名,都是免备案的.具体的请自行百度,花生壳注册地址 二.申请阿里云免费的https证书 阿里云免费的http

  • 微信小程序 rich-text的使用方法

     微信小程序 rich-text的使用方法 rich-text 属性:nodes 类型:Array / String 结点列表 / HTML String 全局支持class和style属性,不支持id属性. 结点类型:type = node , name 标签名 String 是 支持部分受信任的HTML结点,  attrs 属性 Object 否 支持部分受信任的属性,遵循Pascal命名法 ,  children 子结点列表 Array 否 结构和nodes一致 结点类型:type = t

  • 微信小程序 setData的使用方法详解

    微信小程序 setData的使用方法详解 最近在使用微信小程序的setData时,遇到了以下问题.如下: 官网文档在使用setData()设置数组对象的某个元素的属性时,是这么使用的: Page({ data: { array: [{text: 'init data'}], }, changeItemInArray: function() { this.setData({ 'array[0].text':'changed data' }) } }) 使用了 'array[0].text' : '

  • 微信小程序手机号码验证功能的实例代码

    wxml <form bindsubmit='formSubmit'> <view class='all'> <text>手机号:</text> <input name="phone" placeholder='请输入手机号' type='number' style='color:#333' placeholder-style="color:#666" maxlength="11" bindi

  • 微信小程序自定义toast实现方法详解【附demo源码下载】

    本文实例讲述了微信小程序自定义toast实现方法.分享给大家供大家参考,具体如下: 一.微信官方默认toast toast最常见了,几乎每个App都有这样的特效,先看下小程序自带的toast效果,立马想死的心都有了~~ 微信自带toast的效果: js文件: wx.showToast({ title: '成功', icon: 'success', duration: 2000 }) 用法超级简单,但官方小程序有几个问题: 只能显示success.loading两种icon 且icon不可去除 持

  • 微信小程序时间轴实现方法示例

    本文实例讲述了微信小程序时间轴实现方法.分享给大家供大家参考,具体如下: 最近项目需要在页面上做一个时间轴,又是第一次做,而且还是在小程序上,要知道小程序里面没有ol/ul/li,看了好几个例子,最后做出来了,开心呀!如图: 做起来其实很简单:一个时间轴包括一个圆圈(css实现圆圈或者找一个圆圈图片)+一条线(css实现直线或者找一个直线的图片)+内容 来看我的代码(代码很不规范,请忽略): wxml <view class='weui-cell-third'> <view class=

  • 微信小程序页面渲染实现方法

    这篇文章主要介绍了微信小程序页面渲染实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 条件渲染:wx:if, wx:elif, wx:else <view wx:if="{{list.length > 5}}" >1</view> <view wx:elif="{{list.length > 2}}">2</view> <view wx:els

  • 微信小程序indexOf的替换方法(推荐)

    方法:通过wxs定义indexOf方法,在页面中引用并使用 栗子: wxs:命名为str.wxs,导出定义的defineIndexOf方法,命名为indexOf function defineIndexOf(str, val) { return str.indexOf(val); } module.exports = { indexOf: defineIndexOf } wxml: 引用str.wxs,并给模块命名为toolStr,在下面的循环中要用到toolStr里面导出的indexOf方法

  • 微信小程序webSocket的使用方法

    博客简介 本篇博客介绍微信小程序中webSocket的使用方法,以及如何用局部网络建立webSocket连接,进行客户端与服务器之间的对话: webSocket简介 微信小程序端API调用 服务器端使用nodejs配置 演示websocket webSocket简介 WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议.WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据.在 WebSocket API 中,浏览

随机推荐