Shulou(Shulou.com)05/31 Report--

This article mainly introduces the relevant knowledge of "how to achieve WeChat Mini Programs to zoom the picture size through two-way sliding". The editor shows you the operation process through an actual case. The method of operation is simple and fast, and it is practical. I hope this article "how to achieve WeChat Mini Programs through two-way sliding to resize the picture" can help you solve the problem.

Js:

Page ({data: {touch: {distance: 0, scale: 1, baseWidth: null, baseHeight: null, scaleWidth: null, scaleHeight: null}}, touchStartHandle (e) {/ / single finger zoom starts Also do not 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 / / I don't have this callback function at the beginning, there will be bug / / when two fingers are put up, 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 (' both hands start the movement') let xMove = e.touches [1] .clientX-e.touches [0] .clientX Let yMove = e.touches [1] .clientY-e.touches [0] .clientY; / / 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:

This is the end of the content about "how WeChat Mini Programs can scale the picture size by sliding in both directions". Thank you for your reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.