一波干货
.wxml
<!--scale.wxml--><view class="container"><view class="tip"><text>scroll-view子元素缩放</text><text>说明：双指缩放开发工具上并不支持，需要在真机上进行。 </text></view><scroll-view class="img" bindtouchstart="touchstartCallback" bindtouchmove="touchmoveCallback" bindtouchend="touchendCallback" scroll-x="true" scroll-y="true" ><image style="zoom:{{stv.scale}};" src="/0/2/1/1_qq_36742720.jpg?1542353573"></image></scroll-view><view><text>x: {{stv.offsetX}}</text>, <text>y: {{stv.offsetY}}</text>, <text>d: {{stv.distance}}</text>, <text>s: {{stv.scale}}</text>, </view></view>
.wxss
/**scale.wxss**/.img {width: 100%;height: 500rpx;background: #AAA;text-align: center;}.img image {/* height: 800rpx;width: 600rpx; */}
.js
//scale.js//获取应用实例var app = getApp()Page({data: {stv: {offsetX: 0,offsetY: 0,zoom: false, //是否缩放状态distance: 0, //两指距离scale: 1, //缩放倍数}},//事件处理函数touchstartCallback: function (e) {//触摸开始console.log('touchstartCallback');console.log(e);if (e.touches.length === 1) {let { clientX, clientY } = e.touches[0];this.startX = clientX;this.startY = clientY;this.touchStartEvent = e.touches;} else {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({'stv.distance': distance,'stv.zoom': true, //缩放状态})}},touchmoveCallback: function (e) {//触摸移动中console.log('touchmoveCallback');console.log(e);if (e.touches.length === 1) {//单指移动if (this.data.stv.zoom) {//缩放状态，不处理单指return;}let { clientX, clientY } = e.touches[0];let offsetX = clientX - this.startX;let offsetY = clientY - this.startY;this.startX = clientX;this.startY = clientY;let { stv } = this.data;stv.offsetX += offsetX;stv.offsetY += offsetY;stv.offsetLeftX = -stv.offsetX;stv.offsetLeftY = -stv.offsetLeftY;this.setData({stv: stv});} else {//双指缩放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);let distanceDiff = distance - this.data.stv.distance;let newScale = this.data.stv.scale + 0.005 * distanceDiff;// 为了防止缩放得太大，所以scale需要限制，同理最小值也是 if (newScale >= 2) {newScale = 2}if (newScale <= 0.6) {newScale = 0.6}this.setData({'stv.distance': distance,'stv.scale': newScale,})}},touchendCallback: function (e) {//触摸结束console.log('touchendCallback');console.log(e);if (e.touches.length === 0) {this.setData({'stv.zoom': false, //重置缩放状态})}},onLoad: function () {console.log('onLoad');}})
