How to implement WeChat Mini Programs Slider Verification by Android

This article mainly explains "Android how to achieve WeChat Mini Programs slider verification", the content of the article is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn "Android how to achieve WeChat Mini Programs slider verification" bar!

As shown in the figure:

Slider verification component

PuzzleVerify directory

Index.wxml

Drag the left slider to complete the upper puzzle

Index.wxss

/ * Jigsaw slide verification * / .slide_model {width: 100%; height: 100vh; z-index: 999; position: fixed; left: 0; top: 0; background: rgba (0,0,0,0.4); display: flex; align-items: center; justify-content: center;}. Slide_wrapper {float: left; z-index: 1; position: relative; width: 90%; background-color: # fff }. Canvas_img {width: 90%; min-height: 150px; position: relative; margin: 25rpx auto 0;} # firstCanvas {z-index: 1! important; width: 100%; height: 100%;} / * picked spaces * / .canvas_view {width: 50px; height: 50px; position: absolute; background: rgba (0,0,0,0.6); z-index: 2 Box-shadow: 00 5px 2px rgba (255,255,255,0.5);} / * moved spaces * / .canfile_image {width: 50px; height: 50px; position: absolute; left: 0; z-index: 3; box-shadow: 0px 0px 15px rgba (0,0,0,0.8); box-sizing: border-box;}. Canfile_image::before {content: "; position: absolute; width: 100%; height: 100% Box-shadow: 0 8px 5px rgba (255,255,255,0.8) inset;}. Canvas_slide {width: 90%; height: 45px; background: # eee; text-align: center; line-height: 80rpx; margin: 0 auto; position: relative; font-size: 26rpx;} / * part of the slider on the slider * / .canvas_width {position: absolute; left: 0; top: 0; height: 45px; background-color: # 1991FA Width: 0; border-top: 1px solid # ddd; border-bottom: 1px solid # ddd;} / * Slider * / .canvas_kus {width: 48px; height: 45px; background-color: # fff; font-size: 36rpx; font-weight: 700; position: absolute; left: 0; top: 0; border: 1px solid # ddd; color: # fff; box-shadow: 00 10px rgba (0,0,0,0.3) }. Canvas_kus > view {width: 100%; height: 100%; background-position: center; background-size: 50% 40%; background-repeat: no-repeat;} / * bottom button position * / .canvas_guil {width: 100%; border-top: 1px solid # f4f4f4; height: 100rpx; display: flex; align-items: center; float: left; font-size: 30rpx; color: # 666;}. Canvas_guil > image {margin-left: 30rpx;}

Index.js

Component (attribute list of {/ * component * / properties: {sildeBlockCont: {/ / accept parent component value type: String}} / * initial data of the component * / data: {canvas_width: 0, slidebel: false, / / sliding pop-up window canfile_image:'', / / cropping image canfile_x:'' / / horizontal position of the cube canfile_y:'', / / Vertical position of the cube slide_clientX: 0, / / moving position slide_status: 0, / / 0 stop operation 1 trigger long press 2 correct 3 error} / * component method list * / methods: {/ / pop-up window visidlisd (e) {var that = this this.setData ({slidebel:! this.data.slidebel) }) if (this.data.slidebel) {if (this.data.canvas_width! = 0) {this.slide_tap () return } wx.nextTick (() = > {let query = this.createSelectorQuery () query.select ('# canvas_img') .boundingClientRect (function (rect) { That.setData ({canvas_width: rect.width}) that.slide_tap () }) .exec ()})}} / / canvas slide_tap (e) {var that = this var imgIndex = Math.round (Math.random () * 13 + 1) that.setData ({canfile_x: Math.round (Math.random ()) * (this.data.canvas_width-120) + 60) Canfile_y: Math.round (Math.random () * (this.data.canvas_width * 13 / 28-60)), canfile_image:'}) setTimeout (function () {var context = wx.createCanvasContext ('firstCanvas') That) context.width = that.data.canvas_width context.height = that.data.canvas_width * 13 / 28 / imgs/puzzle-bg-$ {imgIndex} .jpg is a slider background map from a static resource Get context.drawImage (`/ imgs/puzzle-bg-$ {imgIndex} .jpg`) from that.properties.properties if you get it from the API. 0,0, context.width, context.height) context.draw (false, () = > {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) })}} That) })}, 50)} / / start sliding slide_start (e) {this.setData ({slide_status: 1})} / / sliding slide_hmove (e) {this.setData ({slide_clientX: (e.touches [0] .clientX-60)

< 1 ? 0 : (e.touches[0].clientX - 60) }) }, //滑动结束 slide_chend(e) { var that = this var cliextX; var maxX = this.data.canvas_width - 60 if (that.data.slide_clientX < 1) { that.data.slide_status = 0 return false } if (that.data.slide_clientX >

MaxX) {cliextX = maxX} 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, }) }, 500) wx.showToast({ icon: 'success', title: '验证成功', }) that.triggerEvent('puzzleVerify') } else { that.setData({ slide_status: 3, }) } setTimeout(function () { that.setData({ slide_status: 0, slide_clientX: 0, }) }, 500) }, }, lifetimes: { created() { // 在组件实例刚刚被创建时执行 }, ready() { // 在组件在视图层布局完成后执行 // console.log(this.properties.sildeBlockCont); }, }}) index.json { "component": true, "usingComponents": {}}父组件调用滑块

Json

"usingComponents": {"puzzleVerify": "/ components/puzzleVerify/index"}

Wxml

Js

Data: {sildeBlockCont:', / / Slider background image}, onReady: function () {this.puzzleVerify = this.selectComponent ("# puzzleVerify")}, getCode () {this.puzzleVerify.visidlisd ()} / / Slider verification successful operation countDown () {} Thank you for reading The above is the content of "how to achieve WeChat Mini Programs slider verification in Android". After the study of this article, I believe you have a deeper understanding of how to achieve WeChat Mini Programs slider verification in Android, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!