uni-app開發經驗分享二十一: 圖片滑動解鎖外掛製作解析
阿新 • • 發佈:2021-01-21
在開發使用者模組的時候,相信大家都碰到過一個功能,圖片滑動解鎖後傳送驗證碼,這裡分享我用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; width: 100%; height: 100%; background-color: rgba(0,0,0,.5); z-index: 999; } .verifyBox{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 85%; background-color: #fff; border-radius: 20upx; box-shadow: 0 0 5upx rgba(0,0,0); } .pintuBox{ position: relative; } .pintuBg{ width: 610upx; height: 343upx; display: block; margin: 17upx auto; } .huakuaiBox{ position: relative; height: 80upx; width: 610upx; margin: 25upx auto; } .yinying{ position: absolute; width: 80upx; height: 80upx; background-color: rgba(0,0,0,.5); } .huakuaiBox movable-area{ height: 80upx; width: 100%; } .huakuaiBox movable-area movable-view{ width: 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; width: 100%; height: 100%; z-index: 101; box-shadow: 0 0 5upx rgba(0,0,0,.3); overflow: hidden; } .pintukuai image{ max-width: none; position: absolute; top: 0; left: 0; width: 610upx; height: 343upx; } .huadao{ position: absolute; width: 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(); },
如果本文章對你有幫助,請點個推薦,歡迎關注我,我會定期更新或分享開發中碰到的問題及解決方法,希望與你共同進步(*^▽^*)。