小程序滑动解锁：
1、给整个页面设置半透明蒙层背景
2、使用canvas实现缺口图效果
问题点：当文字内容超过一页时，被遮罩层遮盖的内容能随屏幕上下滑动，canvas内的图片也会随页面上下滑动

效果图：

问题图片：
提示：这个效果在编辑器（电脑）上面是看不出效果的，在安卓手机正常，苹果手机不正常

解决方法

直接在弹框蒙层最外层加上 :catchtouchmove=“true” 即可。

完整代码：

<template><view class="tf-Box-Bg" :catchtouchmove="true"><view class="tf-Box"><view class="tf-Box-title">请完成安全验证<view class="tf-close" @click.stop="close_"></view></view><canvas :style="{ width: canvasW + 'px', height: canvasH + 'px' }" class="tf-Box-center" canvas-id="tf-verify-canvas" id="tf-verify-canvas"></canvas><movable-area class="tf-Box-BtnBox"><view class="tf-Box-BtnBox-text">滑动滑块完成拼图</view><movable-view class="tf-Box-BtnNei" direction="all" :x="canvasX2" @change="changePath" @touchend="endTouch"><view class="tf-Box-BtnNei-leftBox" :style="{backgroundColor:verifyImgs[verifyIndex].color}"></view></movable-view></movable-area></view></view>
</template><script>export default {name:"tf-verify-img",data() {return {verifyImgs:[{src:'../../subPages/static/verify/0.jpeg',color:'#38a7b7'},{src:'../../subPages/static/verify/1.jpeg',color:'#485967'},{src:'../../subPages/static/verify/2.jpeg',color:'#38a7b7'},{src:'../../subPages/static/verify/3.jpeg',color:'#485967'},{src:'../../subPages/static/verify/4.jpeg',color:'#38a7b7'}],verifyIndex:0,canvasW:"",canvasH:"",canvasX2:0,//归为用的canvasX:0,//实时移动Xctx:false,jgX:0,//结果XdqImgPath:'',//本地临时图片路径};},created() {this.canvasW = uni.upx2px(580);this.canvasH = uni.upx2px(290);},mounted() {this.$nextTick(()=>{this.init()})},methods:{// 生成从minNum到maxNum的随机数randomNum(minNum,maxNum){ switch(arguments.length){ case 1: return parseInt(Math.random()*minNum+1,10); break; case 2: return parseInt(Math.random()*(maxNum-minNum+1)+minNum,10); break; default: return 0; break; } },close_(){this.$emit('close')},init(){this.canvasX2--;this.canvasX = 0;this.verifyIndex = this.randomNum(0,this.verifyImgs.length-1);this.ctx = uni.createCanvasContext('tf-verify-canvas',this);this.jgX = this.randomNum(uni.upx2px(150),uni.upx2px(450));this.dqImgPath = this.verifyImgs[this.verifyIndex].src;this.huatu();},endTouch(){if(Math.abs(this.canvasX-this.jgX)<=5){this.$emit('succeed')}else{uni.showToast({title: '验证失败',icon:"error"});this.init();}},huatu(){let this_ = this;let r = uni.upx2px(10);let XX = this.canvasX;let YY = uni.upx2px(100);let cs = uni.upx2px(20);this_.ctx.drawImage(this_.dqImgPath,0,0,this_.canvasW,this_.canvasH);//画不可移动的拼图块this_.ctx.beginPath();this_.ctx.moveTo(-2*r+this_.jgX+cs+2*r, YY-2*r+2*r);this_.ctx.lineTo(-2*r+this_.jgX+cs+5.5*r, YY-2*r+2*r);this_.ctx.arcTo(-2*r+this_.jgX+cs+5.5*r, YY-2*r+3*r, XX-2+this_.jgX*r+cs+6.5*r, YY-2*r+3*r, r);this_.ctx.lineTo(-2*r+this_.jgX+cs+7.5*r, YY-2*r+3*r);this_.ctx.arcTo(-2*r+this_.jgX+cs+8.5*r, YY-2*r+3*r, -2*r+this_.jgX+cs+8.5*r, YY-2*r+2*r, r);this_.ctx.lineTo(-2*r+this_.jgX+cs+12*r, YY-2*r+2*r);this_.ctx.lineTo(-2*r+this_.jgX+cs+12*r, YY-2*r+11*r);this_.ctx.lineTo(-2*r+this_.jgX+cs+8.5*r, YY-2*r+11*r);this_.ctx.arcTo(-2*r+this_.jgX+cs+8.5*r, YY-2*r+12*r, -2*r+this_.jgX+cs+7.5*r, YY-2*r+12*r, r);this_.ctx.lineTo(-2*r+this_.jgX+cs+6.5*r, YY-2*r+12*r);this_.ctx.arcTo(-2*r+this_.jgX+cs+5.5*r, YY-2*r+12*r, -2*r+this_.jgX+cs+5.5*r, YY-2*r+11*r, r);this_.ctx.lineTo(-2*r+this_.jgX+cs+2*r, YY-2*r+11*r);this_.ctx.lineTo(-2*r+this_.jgX+cs+2*r, YY-2*r+8*r);this_.ctx.arcTo(-2*r+this_.jgX+cs+3*r, YY-2*r+8*r, -2*r+this_.jgX+cs+3*r, YY-2*r+7*r, r);this_.ctx.lineTo(-2*r+this_.jgX+cs+3*r, YY-2*r+6*r);this_.ctx.arcTo(-2*r+this_.jgX+cs+3*r, YY-2*r+5*r, -2*r+this_.jgX+cs+2*r, YY-2*r+5*r, r);this_.ctx.lineTo(-2*r+this_.jgX+cs+2*r, YY-2*r+2*r);this_.ctx.shadowBlur=10;this_.ctx.shadowColor="#ffffff";this_.ctx.fillStyle = "rgba(0,0,0,0.5)";this_.ctx.fill();this_.ctx.restore(); //画可移动的拼图块this_.ctx.beginPath();this_.ctx.save();this_.ctx.moveTo(XX-2*r+cs+2*r, YY-2*r+2*r);this_.ctx.lineTo(XX-2*r+cs+5.5*r, YY-2*r+2*r);this_.ctx.arcTo(XX-2*r+cs+5.5*r, YY-2*r+3*r, XX-2*r+cs+6.5*r, YY-2*r+3*r, r);this_.ctx.lineTo(XX-2*r+cs+7.5*r, YY-2*r+3*r);this_.ctx.arcTo(XX-2*r+cs+8.5*r, YY-2*r+3*r, XX-2*r+cs+8.5*r, YY-2*r+2*r, r);this_.ctx.lineTo(XX-2*r+cs+12*r, YY-2*r+2*r);this_.ctx.lineTo(XX-2*r+cs+12*r, YY-2*r+11*r);this_.ctx.lineTo(XX-2*r+cs+8.5*r, YY-2*r+11*r);this_.ctx.arcTo(XX-2*r+cs+8.5*r, YY-2*r+12*r, XX-2*r+cs+7.5*r, YY-2*r+12*r, r);this_.ctx.lineTo(XX-2*r+cs+6.5*r, YY-2*r+12*r);this_.ctx.arcTo(XX-2*r+cs+5.5*r, YY-2*r+12*r, XX-2*r+cs+5.5*r, YY-2*r+11*r, r);this_.ctx.lineTo(XX-2*r+cs+2*r, YY-2*r+11*r);this_.ctx.lineTo(XX-2*r+cs+2*r, YY-2*r+8*r);this_.ctx.arcTo(XX-2*r+cs+3*r, YY-2*r+8*r, XX-2*r+cs+3*r, YY-2*r+7*r, r);this_.ctx.lineTo(XX-2*r+cs+3*r, YY-2*r+6*r);this_.ctx.arcTo(XX-2*r+cs+3*r, YY-2*r+5*r, XX-2*r+cs+2*r, YY-2*r+5*r, r);this_.ctx.lineTo(XX-2*r+cs+2*r, YY-2*r+2*r);this_.ctx.shadowBlur=10;this_.ctx.shadowColor="#ffffff";this_.ctx.fill();this_.ctx.clip();this_.ctx.drawImage(this_.dqImgPath,this_.canvasX-this_.jgX,0,this_.canvasW,this_.canvasH);this_.ctx.restore(); //绘图this_.ctx.draw();},changePath(e){this.canvasX = e.target.x;this.huatu();}}}
</script><style lang="scss">.tf-Box-Bg{position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 100;background-color: rgba(0,0,0,.3);display: flex;align-items: center;justify-content: center;z-index: 99999;.tf-Box{width: 640rpx;height: 584rpx;background-color: #fff;border-radius: 6rpx;box-shadow: 0 0 50rpx 0rpx rgba(0,0,0,.2);.tf-Box-title{height: 100rpx;line-height: 1;padding: 0 32rpx;font-size: 32rpx;border-bottom: 1px solid #E1E3E9;display: flex;align-items: center;justify-content: space-between;.tf-close{width: 28rpx;height: 28rpx;padding: 20rpx;background-image: url(img/tf-close.png);background-size: 100% 100%;}}.tf-Box-center{margin: 30rpx auto;border-radius: 6upx;}.tf-Box-BtnBox{margin: 30rpx auto;width: 580rpx;height: 75rpx;line-height: 75rpx;text-align: center;font-size: 28rpx;border-radius: 6rpx;border: 1px solid #E1E3E9;background-color: #F7F8F9;overflow: hidden;position: relative;.tf-Box-BtnBox-text{width: 100%;height: 75rpx;position: absolute;top: 0;left: 0;color: #424649;text-align: center;}.tf-Box-BtnNei{height: 75rpx;width: 75rpx;background-color: #fff;box-shadow: 0 0 10rpx 0rpx rgba(0,0,0,.2);background-image: url(img/tf-arrows.png);background-size: 34rpx;background-position: center;background-repeat: no-repeat;.tf-Box-BtnNei-leftBox{position: absolute;top: 0;left: -580rpx;width: 580rpx;height: 100%;}}}}}
</style>

使用方法

1、在components下面新建组件，并创建vue文件，将上面代码复制进去

2、创建img文件夹，放入滑动解锁图标，和关闭图标

3、再配置引入动解锁图片

4、在vue页面中使用
通过v-if控制组件显示隐藏，@succeed为滑块验证成功的事件，@close为组件关闭事件

</template></view><xc-verify-img v-if="sliderVerifyFLag" @succeed="verifyResult" @close="sliderVerifyFLag = false"></xc-verify-img></view>
</template>// 滑块验证结果回调函数
methods:{verifyResult() {uni.showToast({title: '验证成功'});  },}

使用canvas实现微信小程序滑动解锁功能；解决canvas图层随背景能上下滑动导致页面错乱问题；相关推荐

微信小程序之分享功能
一.介绍微信小程序的分享功能可以分享页面给朋友或群聊,但是不能分享到朋友圈,需要分享朋友圈的话,可以在小程序内设计一个分享页面,利用小程序提供的canvas把小程序码绘制到分享图里保存到本地分享到朋 ...
黯然微信小程序杂记（三）：微信小程序实现倒计时功能附讲解教学附源码
黯然微信小程序杂记(三):微信小程序实现倒计时功能附超详细注释附源码一.功能描述二.界面展示三.test.wxml代码四.test.js代码(注释很详细很易懂) CSDN私信我,有关微信 ...
微信小程序使用wxParse，解决图片显示路径问题
微信小程序使用wxParse,解决图片显示路径问题参考文章: (1)微信小程序使用wxParse,解决图片显示路径问题 (2)https://www.cnblogs.com/zxf100/p/100 ...
微信小程序实战购物车功能
代码地址如下: http://www.demodashi.com/demo/12400.html 一.准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.com ...
微信小程序实现语音识别功能
原标题:微信小程序实现语音识别功能使用小程序实现语音识别功能,由于语音识别可以直接使用各厂家的API接口,并且小程序为腾讯所有,因此考虑到可能的低延时,采用了腾讯提供的免费API接口,准确讲是腾讯语 ...
微信小程序语音识别java_微信小程序实现语音识别功能
原标题:微信小程序实现语音识别功能使用小程序实现语音识别功能,由于语音识别可以直接使用各厂家的API接口,并且小程序为腾讯所有,因此考虑到可能的低延时,采用了腾讯提供的免费API接口,准确讲是腾讯语 ...
微信小程序拼团功能页面展示
微信小程序拼团功能页面展示一.拼团功能拼团就是让消费者在优惠价格的吸引下,自发邀请好友组团,以优惠的价格购买商品的促销活动二.拼团功能的作用 1.与纯粹的购物相比,这种营销方式迎合了大多数用户的 ...
微信小程序原生开发功能合集一：微信小程序开发介绍
一.专栏介绍本专栏主要内容为微信小程序常用功能开发过程的介绍说明,包括开发微信小程序常用组件的封装.常用功能的开发等,提供源代码.开发过程讲解视频.完整的课程等. 组件封装: 下拉选择组件. ...
IVX低代码平台开发——微信小程序实现抽奖功能
写在前面通过利用可视化编程实现微信小程序的抽奖功能,带大家初步了解 iVX 的强大之处. 文章目录写在前面 iVX开发抽奖功能实现 iVX开发基本介绍 iVX是一个 "零代码&quo ...
微信小程序-001-抽签功能-006-我的抽签-主界面
微信小程序-001-抽签功能-006-我的抽签-主界面目录一.wxml 二.js pages.chouqian.setqian.setqian 一.wxml <view wx:for=&qu ...

使用canvas实现微信小程序滑动解锁功能；解决canvas图层随背景能上下滑动导致页面错乱问题；

解决方法

使用方法

使用canvas实现微信小程序滑动解锁功能；解决canvas图层随背景能上下滑动导致页面错乱问题；相关推荐

最新文章

热门文章

使用canvas实现微信小程序滑动解锁功能 ；解决canvas图层随背景能上下滑动导致页面错乱问题；

解决方法

使用方法

使用canvas实现微信小程序滑动解锁功能 ；解决canvas图层随背景能上下滑动导致页面错乱问题；相关推荐

最新文章

热门文章

使用canvas实现微信小程序滑动解锁功能；解决canvas图层随背景能上下滑动导致页面错乱问题；

使用canvas实现微信小程序滑动解锁功能；解决canvas图层随背景能上下滑动导致页面错乱问题；相关推荐