• uni-app开发经验分享二十一: 图片滑动解锁插件制作解析


    在开发用户模块的时候,相信大家都碰到过一个功能,图片滑动解锁后发送验证码,这里分享我用uni-app制作的一个小控件

    效果如下:

    需要如下图片资源

    template

    <template>
    	<view class="zhezhao" v-if="shows" @tap="shows=false">
    		<view class="verifyBox" @touchend="onEnd">
    			<view class="pintuBox">
    				<image :src="imgUrl+'/tfgg-verify/'+img+'.jpg'" class="pintuBg"></image>
    			</view>
    			<view class="huakuaiBox">
    				<view class="yinying" :style="{top:top+'px',left:left+'px'}"></view>
    				<movable-area :animation="true">
    					<movable-view :x="x" direction="horizontal" @change="onMove">
    						<view class="pintukuai" :style="{top:top+'px'}"><image :src="imgUrl+'/tfgg-verify/'+img+'.jpg'" :style="{top:-lefttop+'px',left:-left+'px'}"></image></view>
    					</movable-view>
    				</movable-area>
    				<view class="huadao">拖动左边滑块完成上方拼图</view>
    			</view>
    		</view>
    	</view>
    </template>

    script

    <script>
    	import app from "@/api/app.js";
    	export default {
    		name: 'tfgg-verify',
    		data() {
    			return {
    				imgUrl: app.appImg,
    				x: 0,//初始距离
    				oldx:0,//移动的距离
    				img:'0',//显示哪张图片
    				left:'',//随机拼图的最终X轴距离
    				top:'',//拼图的top距离
    				lefttop:'',//拼图内容的top距离
    				shows:false
    			};
    		},
    		mounted() {
    			this.shuaxinVerify()
    		},
    		methods: {
    			//刷新验证
    			shuaxinVerify(){
    				var gl = Math.random();
    				this.left = uni.upx2px(500)*gl>uni.upx2px(250)?(uni.upx2px(500)*gl):uni.upx2px(250);//生成随机X轴最终距离
    				this.top = -(uni.upx2px(25)+uni.upx2px(343)-(uni.upx2px(263)*gl));//生成随机Y轴初始距离
    				this.lefttop = uni.upx2px(263)*gl;//生成随机Y轴初始距离
    				if(gl<=0.25){
    					this.img=1
    				}if(gl>0.25&&gl<=5){
    					this.img=2
    				}if(gl>0.5&&gl<=0.75){
    					this.img=3
    				}if(gl>0.75&&gl<=1){
    					this.img=4
    				}
    			},
    			/* 滑动中 */
    			onMove(e) {
    				this.oldx = e.detail.x;
    			},
    			/* 滑动结束 */
    			onEnd() {
    				if(Math.abs(this.oldx-this.left)<=5){
    					uni.showToast({
    						title: '验证成功'
    					});
    					this.$emit("result",true);
    					this.hide();
    				}else{
    					uni.showToast({
    						title: '验证失败'
    					});
    					this.shuaxinVerify()
    					this.reset()
    				}
    			},
    			/* 重置 */
    			reset(){
    				console.log('重置');
    				this.x = 1;
    				this.oldx = 1;
    				setTimeout(()=>{
    					this.x = 0;
    					this.oldx = 0;
    				},300)
    			},
    			show(){
    				this.shows=true;
    			},
    			hide(){
    				this.shows=false;
    			}
    		}
    	}
    </script>
    

    style

    <style>
    	.zhezhao{
    		position: fixed;
    		top: 0;
    		left: 0;
    		 100%;
    		height: 100%;
    		background-color: rgba(0,0,0,.5);
    		z-index: 999;
    	}
    	.verifyBox{
    		position: absolute;
    		top: 50%;
    		left: 50%;
    		transform: translate(-50%,-50%);
    		 85%;
    		background-color: #fff;
    		border-radius: 20upx;
    		box-shadow: 0 0 5upx rgba(0,0,0);
    	}
    	.pintuBox{
    		position: relative;
    	}
    	.pintuBg{
    		 610upx;
    		height: 343upx;
    		display: block;
    		margin: 17upx auto;
    	}
    	.huakuaiBox{
    		position: relative;
    		height: 80upx;
    		 610upx;
    		margin: 25upx auto;
    	}
    	.yinying{
    		position: absolute;
    		 80upx;
    		height: 80upx;
    		background-color: rgba(0,0,0,.5);
    	}
    	.huakuaiBox movable-area{
    		height: 80upx;
    		 100%;
    	}
    	.huakuaiBox movable-area movable-view{
    		 80upx;
    		height: 80upx;
    		border-radius: 50%;
    		background-color: #007cff;
    		background-image: url(../../static/images/tfgg-verify/icon-button-normal.png);
    		background-repeat: no-repeat;
    		background-size: auto 30upx;
    		background-position: center;
    		position: relative;
    		z-index: 100;
    	}
    	.pintukuai{
    		position: absolute;
    		top: -105upx;
    		left: 0;
    		 100%;
    		height: 100%;
    		z-index: 101;
    		box-shadow: 0 0 5upx rgba(0,0,0,.3);
    		overflow: hidden;
    	}
    	.pintukuai image{
    		max- none;
    		position: absolute;
    		top: 0;
    		left: 0;
    		 610upx;
    		height: 343upx;
    	}
    	.huadao{
    		position: absolute;
    		 calc(100% - 35upx);
    		height: 65upx;
    		line-height: 65upx;
    		background: #eee;
    		box-shadow: inset 0 0 5upx #ccc;
    		border-radius: 60upx;
    		color: #999;
    		text-align: center;
    		top: 50%;
    		right: 0;
    		transform: translateY(-50%);
    		font-size: 18upx;
    		padding-right: 35upx;
    		z-index: 99;
    	}
    </style>

    调用方法

    引入控件

    import tfggVerify from "@/components/tfgg-verify/tfgg-verify.vue"

    view里加上

    <tfgg-verify @result='verifyResult' ref="verifyElement"></tfgg-verify>

    components加上

    components: {
      "tfgg-verify": tfggVerify
    },

    方法案例

    /* 校验结果回调函数 */
    verifyResult(res) {
    	if (res) {
    		this.$refs.verifyElement.reset(); //校验成功重置插件
    		console.log('验证成功')
    	}
    	console.log(res);
    },
    /* 显示校验弹窗 */
    verifyFasong() {
    	this.$refs.verifyElement.show();
    },
    /* 校验插件重置 */
    verifyReset() {
    	this.$refs.verifyElement.reset();
    },
    

      

    如果本文章对你有帮助,请点个推荐,欢迎关注我,我会定期更新或分享开发中碰到的问题及解决方法,希望与你共同进步(*^▽^*)。

  • 相关阅读:
    第1章 CLR的执行模型
    第19章 可空值类型
    Servlet 3.0 特性
    java代码逆序输出再连篇
    java代码逆序输出数字
    java代码实现从键盘输入编号,输出价格,并且不再编号内的,无效输入!!!!
    java代码,实现输入编号,输出对应水果的单价~~~~
    java.输入水果的编号,求它对应的单价
    java.控制次数,每一组数都要计算。所以有个嵌套
    java练习,,,从键盘输入次数,输出最大值,和
  • 原文地址:https://www.cnblogs.com/smileZAZ/p/14308812.html
Copyright © 2020-2023  润新知