微信小程序?qū)崿F(xiàn)登陸注冊滑塊驗證
更新時間:2022年05月23日 11:37:01 作者:XJ_18335388352
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)登陸注冊滑塊驗證,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了微信小程序?qū)崿F(xiàn)登陸注冊滑塊驗證的具體代碼,供大家參考,具體內(nèi)容如下
一、創(chuàng)建自定義組件MoveVerify
MoveVerify.js
Component({ ? /** ? ?* 組件的屬性列表 ? ?*/ ? properties: { ? ? }, ? ? /** ? ?* 組件的初始數(shù)據(jù) ? ?*/ ? data: { ? ? x: 0, ? ? oldx: 0, ? ? isOk: false, ? ? size: {} ? }, ? ready(){ ? ? let getSize = (selector) => { ? ? ? return new Promise((resolve, reject) => { ? ? ? ? let view = wx.createSelectorQuery().in(this).select(selector); ? ? ? ? view.fields({ ? ? ? ? ? size: true, ? ? ? ? }, (res) => { ? ? ? ? ? resolve(res.width); ? ? ? ? }).exec(); ? ? ? }); ? ? } ? ? getSize("#pathway").then((res1) => { ? ? ? this.data.size.pathway = res1; ? ? ? getSize("#track").then((res2) => { ? ? ? ? this.data.size.track = res2; ? ? ? }); ? ? }) ? }, ? /** ? ?* 組件的方法列表 ? ?*/ ? methods: { ? ? onChange(e){ ? ? ? this.setData({ ? ? ? ? oldx: e.detail.x ? ? ? }) ? ? }, ? ? onEnd(){ ? ? ? if (this.data.isOk) { ? ? ? ? return; ? ? ? } ? ? ? if ((this.data.oldx + 1) > (this.data.size.pathway - this.data.size.track)) { ? ? ? ? this.setData({ ? ? ? ? ? isOk:true ? ? ? ? },()=>{ ? ? ? ? ? this.triggerEvent('result'); ? ? ? ? }); ? ? ? } else { ? ? ? ? this.setData({ ? ? ? ? ? x: 0, ? ? ? ? ? oldx: 0 ? ? ? ? }) ? ? ? } ? ? } ? } })
verification-puzzle.json
{ ? "component": true, ? "usingComponents": {} }
verification-puzzle.wxml
<view class='pathway' bindtouchend='onEnd' id='pathway'> ? ? <view class="tips"> ? ? ? ? <text wx:if="{{isOk}}" style="color: #FFFFFF;">驗證通過</text> ? ? ? ? <!-- <text wx:else>拖動滑塊驗證</text> --> ? ? ? ? <text wx:else>請按住滑塊,拖動到最右邊</text> ? ? </view> ? ? <view class="track" style="transform:translateX({{oldx}}px)"></view> ? ? <movable-area> ? ? ? ? <movable-view x="{{x}}" ?direction="horizontal"? ? ? ? ? ? ? bindchange="onChange" ? ? ? ? ? ? ? class='{{isOk ? "active":""}}'? ? ? ? ? ? ? id="track"> ? ? ? ? </movable-view> ? ? </movable-area> ? ? <view class="disabled" wx:if="{{isOk}}"></view> </view>
verification-puzzle.wxss
/* components/MoveVerify.wxss */ .pathway { ? height: 80rpx; ? width: 100%; ? background-color: #7ac23c; ? position: relative; ? overflow: hidden; } ? .pathway .tips { ? position: absolute; ? top: 0; ? left: 0; ? width: 100%; ? line-height: 80rpx; ? text-align: center; ? color: #666; ? font-size: 32rpx; ? z-index: 3; } ? .pathway .track { ? position: absolute; ? top: 0; ? left: 0; ? background-color: #eee; ? width: 100%; ? height: 100%; ? padding-left: 0; ? box-sizing: content-box; ? transform: translateX(0); } ? .pathway movable-area { ? position: absolute; ? top: 0; ? left: 0; ? height: 100%; ? width: 100%; ? background: none; ? z-index: 5; } ? .pathway movable-view { ? height: 100%; ? width: 100rpx; ? box-sizing: border-box; ? background-color: #fff; ? border: #ddd solid 1px; ? background-position: center; ? background-repeat: no-repeat; ? background-size: auto 32rpx; ? background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo0ZDhlNWY5My05NmI0LTRlNWQtOGFjYi03ZTY4OGYyMTU2ZTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NTEyNTVEMURGMkVFMTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NTEyNTVEMUNGMkVFMTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo2MTc5NzNmZS02OTQxLTQyOTYtYTIwNi02NDI2YTNkOWU5YmUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NGQ4ZTVmOTMtOTZiNC00ZTVkLThhY2ItN2U2ODhmMjE1NmU2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+YiRG4AAAALFJREFUeNpi/P//PwMlgImBQkA9A+bOnfsIiBOxKcInh+yCaCDuByoswaIOpxwjciACFegBqZ1AvBSIS5OTk/8TkmNEjwWgQiUgtQuIjwAxUF3yX3xyGIEIFLwHpKyAWB+I1xGSwxULIGf9A7mQkBwTlhBXAFLHgPgqEAcTkmNCU6AL9d8WII4HOvk3ITkWJAXWUMlOoGQHmsE45ViQ2KuBuASoYC4Wf+OUYxz6mQkgwAAN9mIrUReCXgAAAABJRU5ErkJggg=="); } ? .pathway movable-view.active { ? border: #7ac23c solid 1px; ? background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo0ZDhlNWY5My05NmI0LTRlNWQtOGFjYi03ZTY4OGYyMTU2ZTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDlBRDI3NjVGMkQ2MTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDlBRDI3NjRGMkQ2MTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDphNWEzMWNhMC1hYmViLTQxNWEtYTEwZS04Y2U5NzRlN2Q4YTEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NGQ4ZTVmOTMtOTZiNC00ZTVkLThhY2ItN2U2ODhmMjE1NmU2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+k+sHwwAAASZJREFUeNpi/P//PwMyKD8uZw+kUoDYEYgloMIvgHg/EM/ptHx0EFk9I8wAoEZ+IDUPiIMY8IN1QJwENOgj3ACo5gNAbMBAHLgAxA4gQ5igAnNJ0MwAVTsX7IKyY7L2UNuJAf+AmAmJ78AEDTBiwGYg5gbifCSxFCZoaBMCy4A4GOjnH0D6DpK4IxNSVIHAfSDOAeLraJrjgJp/AwPbHMhejiQnwYRmUzNQ4VQgDQqXK0ia/0I17wJiPmQNTNBEAgMlQIWiQA2vgWw7QppBekGxsAjIiEUSBNnsBDWEAY9mEFgMMgBk00E0iZtA7AHEctDQ58MRuA6wlLgGFMoMpIG1QFeGwAIxGZo8GUhIysmwQGSAZgwHaEZhICIzOaBkJkqyM0CAAQDGx279Jf50AAAAAABJRU5ErkJggg=="); } ? .pathway .disabled { ? position: absolute; ? z-index: 10; ? height: 100%; ? width: 100%; ? top: 0; ? left: 0; }
二、在index頁面使用
index.wxml
<move-verify bind:result="verificationResult"></move-verify>
index.js
// pages/test/test/test.js Page({ ? /** ? ?* 頁面的初始數(shù)據(jù) ? ?*/ ? data: {}, ? verificationResult() { ? ? console.log("驗證通過"); ? }, ? /** ? ?* 生命周期函數(shù)--監(jiān)聽頁面加載 ? ?*/ ? onLoad: function (options) { ? ? // this.randomVerification() ? }, ? /** ? ?* 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成 ? ?*/ ? onReady: function () { ? }, ? /** ? ?* 生命周期函數(shù)--監(jiān)聽頁面顯示 ? ?*/ ? onShow: function () { ? }, ? /** ? ?* 生命周期函數(shù)--監(jiān)聽頁面隱藏 ? ?*/ ? onHide: function () { ? }, ? /** ? ?* 生命周期函數(shù)--監(jiān)聽頁面卸載 ? ?*/ ? onUnload: function () { ? }, ? /** ? ?* 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動作 ? ?*/ ? onPullDownRefresh: function () { ? }, ? /** ? ?* 頁面上拉觸底事件的處理函數(shù) ? ?*/ ? onReachBottom: function () { ? }, ? /** ? ?* 用戶點擊右上角分享 ? ?*/ ? onShareAppMessage: function () { ? } })
index.json
{ ? "usingComponents": { ? ?? ?"move-verify": "/components/MoveVerify/MoveVerify", ?? ?} }
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
js正則表達式最長匹配(貪婪匹配)和最短匹配(懶惰匹配)用法分析
這篇文章主要介紹了js正則表達式最長匹配(貪婪匹配)和最短匹配(懶惰匹配)用法,結(jié)合實例形式分析了貪婪匹配與懶惰匹配的具體用法與相關(guān)注意事項,需要的朋友可以參考下2016-12-12用js來刷新當(dāng)前頁面保留參數(shù)的具體實現(xiàn)
本文為大家詳細介紹下如何使用js來刷新當(dāng)前頁面保留參數(shù),下面有個不錯的實現(xiàn)大家可以看看2013-12-12