How does WeChat Mini Programs realize the double sliding and zooming of the picture?

This article mainly introduces WeChat Mini Programs how to achieve picture double sliding zoom size, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, let the editor take you to know about it.

In the process of doing Mini Program development, a picture map comes from the backend. You need to slide your fingers and zoom the image. Finally, you get the following code:

Js:

Page ({data: {touch: {distance: 0, scale: 1, baseWidth: null, baseHeight: null, scaleWidth: null, scaleHeight: null}}, touchStartHandle (e) {/ / single finger zoom starts Nor do any processing if (e.touches.length = = 1) {console.log ("single slip") return} console.log ('two-handed finger trigger start') / / pay attention to the start of the touchstartCallback real code / / at the beginning I don't have this callback function, it will appear bug / / when two fingers are zoomed in. Initialize the distance. Let xMove = e.touches [1] .clientX-e.touches [0] .clientX; let yMove = e.touches [1] .clientY-e.touches [0] .clientY; let distance = Math.sqrt (xMove * xMove + yMove * yMove) This.setData ({'touch.distance': distance,})}, touchMoveHandle (e) {let touch = this.data.touch / / single finger zoom We don't do anything if (e.touches.length = = 1) {console.log ("single slip") Return} console.log let xMove = e.touches [1] .clientX-e.touches [0] .clientX; let yMove = e.touches [1] .clientY-e.touches [0] .clientY; / / the new ditance let distance = Math.sqrt (xMove * xMove + yMove * yMove); let distanceDiff = distance-touch.distance Let newScale = touch.scale + 0.005 * distanceDiff / / to prevent scaling too large, scale needs to limit The same minimum value is also if (newScale > = 2) {newScale = 2} if (newScale old this.setData ({'touch.distance': distance,' touch.scale': newScale, 'touch.scaleWidth': scaleWidth,' touch.scaleHeight': scaleHeight, 'touch.diff': distanceDiff})}, load: function (e) {/ / bindload this api is the api of the component

Onload property this.setData ({'touch.baseWidth': e.detail.width,' touch.baseHeight': e.detail.height, 'touch.scaleWidth': e.detail.width,' touch.scaleHeight': e.detail.height});}})

Then the newly obtained picture width and height can be assigned to the picture to achieve sliding scaling.

Wxml:

Thank you for reading this article carefully. I hope the article "how to double-slide the size of a picture" shared by the editor will be helpful to everyone. At the same time, I also hope that you will support and pay attention to the industry information channel. More related knowledge is waiting for you to learn!