微信小程序滑动验证拼图（有效果图）

效果图

.wxml

<button bindtap="visidlisd">滑动验证</button>
<!-- 滑动验证弹窗 -->
<view class="slide_model" wx:if="{{slidebel}}"><view><view class="canvas_img"><canvas wx:if="{{!canfile_image}}" style="width: 300px; height: 104px;" canvas-id="firstCanvas"></canvas><image wx:if="{{canfile_image}}" class="canvas_srinl" src="/images/slideimage_{{canfile_index}}.jpg"></image><view class="canvas_view" style="left:{{canfile_x}}px;top:{{canfile_y}}px;"></view><image class="canfile_image" style="top:{{canfile_y}}px;left:{{slide_clientX > 250 ? 250 : slide_clientX}}px;" src="{{canfile_image}}"></image></view><view class="canvas_slide"><view class="canvas_width" style="width:{{slide_clientX > 260?260: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 > 260?260: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}}" class="cuIcon-back_android"></view><view wx:if="{{slide_status == 2}}" class="cuIcon-check"></view><view wx:if="{{slide_status == 3}}" class="cuIcon-close"></view></view><view wx:if="{{slide_status == 0}}">拖动左边滑块完成上方拼图</view></view><view class="canvas_guil"><view bindtap="visidlisd" class="cuIcon-roundclose"></view><view bindtap="slide_tap" class="cuIcon-refresh"></view></view></view>
</view>

.wxss

/* 滑动验证 */
.slide_model{width: 100%;height: 100vh;z-index: 10;position: fixed;left: 0;top: 0;background:rgba(0, 0, 0, 0.4);display: flex;align-items: center;justify-content: center;}
.slide_model>view{float: left;z-index: 1;position: relative;width: calc(300px + 60rpx);background-color: #fff;}
.canvas_img{width: 300px;height: 104px;position: relative;float: left;margin: 30rpx 30rpx 0;}
.canvas_view{width: 50px;height: 50px;position: absolute;background:#fff;z-index: 2;}
.canfile_image{width: 50px;height: 50px;position: absolute;left: 0;z-index: 3;box-shadow: 0px 1px 27px rgba(0, 0, 0, 0.2);}
.canvas_kus{width: 40px;height: 40px;background-color: #fff;font-size: 36rpx;font-weight: 700;position: absolute;left: 0;top: 0;border: 1px solid #ddd;color: #fff;}
.canvas_srinl{width: 300px;height: 104px;}
.canvas_width{position: absolute;left: 0;top: 0;height:40px;background-color: #1991FA;width: 0;border-top: 1px solid #ddd;border-bottom: 1px solid #ddd;}
.cuIcon-back_android{transform:rotate(180deg);}
.canvas_slide{width: 300px;height: 40px;background:#eee;text-align: center;padding-left: 50rpx;line-height: 80rpx;float: left;margin: 30rpx;position: relative;font-size: 26rpx;}
.canvas_guil{width: 100%;border-top: 1px solid #f4f4f4;height: 100rpx;display: flex;align-items: center;float: left;font-size: 46rpx;color: #666;}
.canvas_guil>view{margin-left: 30rpx;}

.js

Page({data: {slidebel:false,//滑动弹窗canfile_image:'',//裁剪图片canfile_index:'',//图片返回 1 至 3 之间的数canfile_x:'',//x返回 60 至 240 之间的数canfile_y:'',//y返回 0 至 50 之间的数slide_clientX:0,//移动位置slide_status:0,//0 停止操作   1 触发长按   2 正确   3 错误},// 弹窗visidlisd(e){this.setData({slidebel:!this.data.slidebel})if(this.data.slidebel){this.slide_tap()}},// 画布slide_tap(e){var that = thisthat.setData({canfile_index:Math.round(Math.random() * 2 + 1),canfile_x:Math.round(Math.random() * 180 + 60),canfile_y:Math.round(Math.random() * 54),canfile_image:''})clearTimeout(that.data.timeoutID)that.data.timeoutID = setTimeout(function () {var context = wx.createCanvasContext('firstCanvas')context.width = 300context.height = 104context.drawImage('/images/slideimage_'+that.data.canfile_index+'.jpg',0,0,context.width,context.height)context.draw(true,(()=>{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})}});}))},300)},// 滑动开始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 = thisvar cliextX;if(that.data.slide_clientX < 1){that.data.slide_status = 0return false}if(that.data.slide_clientX > 240){cliextX = 240}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,})},1500)}else{that.setData({slide_status:3,})}setTimeout(function () {that.setData({slide_status:0,slide_clientX:0,})},1500)},
})

遇到问题可以看我主页加我Q，很少看博客，对你有帮助别忘记点赞收藏。

微信小程序滑动验证拼图（有效果图）相关推荐

微信小程序滑动侧边栏
微信小程序滑动侧边栏效果图: 手指向右滑动可以显示侧边栏,向左滑动隐藏侧边栏代码附上:.wxml <view class="title"><image cla ...
微信小程序：图片拼图小程序源码
该款小程序支持多种流量主另外支持多种图形模板制作切割另外也支持长图合成等功能安装简单,新手容易上手,具体就不多说了大家自行研究吧! 小程序源码下载地址: 微信小程序:图片拼图小程序源码-小程序文 ...
使用canvas实现微信小程序滑动解锁功能；解决canvas图层随背景能上下滑动导致页面错乱问题；
小程序滑动解锁 : 1.给整个页面设置半透明蒙层背景 2.使用canvas实现缺口图效果问题点:当文字内容超过一页时,被遮罩层遮盖的内容能随屏幕上下滑动,canvas内的图片也会随页面上下滑动效果 ...
微信小程序登陆验证机制理解及实现
椰汁笔记,欢迎指正微信小程序的登录(python flask实现后端),实现的核心是让服务器得到用户的openid. 服务器生成sessionId发送给客户端,sessionId即是客户端和服务器 ...
微信小程序滑动日历实现思路
需求做项目的时候需要用到一种日历,看完设计师的设计稿总结成:可以左右滑动切换显示的日历,能够在某一个日期下显示文字和标签,并且提供选择某一个范围内的日期和单选两种功能. 刚开始看到,想着这种组件网上 ...
微信小程序滑动导航栏
微信小程序可以使用组件库中的 scroll-view 组件和 swiper 组件实现滑动导航栏. 下面是一个使用 scroll-view 组件实现滑动导航栏的例子: 在 .wxml 文件中定义 scr ...
node微信小程序支付验证
Node 微信支付验证说明业务流程支付验证辅助方法结束说明之前写了一个,单纯的微信小程序支付的接口,这篇介绍一下支付完之后如何验证. 业务流程支付验证我们之前支付的时候有一个参数 n ...
微信小程序滑动屏幕控制动画隐藏和显示
思路一,使用scroll-view组件的事件,缺点:动画不够流畅思路二,微信小程序自带的pagescroll事件,缺点:监听不方便,层级较高思路三,给页面最外层添加触摸事件思路四,小程序自带的触 ...
微信小程序支付验证签名失败
微信小程序支付下单调用的是JSAPI下单,但是前端返回参数时,appId中的I要大写和公众号支付不一样
微信小程序图片验证组件封装
一.图片滑动验证组件延迟页面展示或者延缓并发处理.当滑动图片到空缺位置后执行加载或者验证. 二.封装源码 1.wxml <!--遮罩层,弹框图片背景,滑动框图片比例:16:9 1.777777 ...

微信小程序滑动验证拼图（有效果图）

效果图

.wxml

.wxss

.js

微信小程序滑动验证拼图（有效果图）相关推荐

最新文章

热门文章