我在做一个类似wx.previewImage的功能(没看到有可以覆盖在wx.previewImage上的组件),需要支持用户双指缩放。
关于图片的代码如下
wxml:
```
<swiper class="main" current="{{currentImageIndex}}" circular>
<swiper-item wx:for="{{list}}" wx:for-item="one" wx:key="{{index}}" catchtap="hideBigPic">
<view style='height:100vh;width:750rpx;display:flex;align-items:center;justify-content:center;'>
<image src="{{one.loadStatus ? one.hash_format_original:one.hash_format_bigpic}}" mode="aspectFit" bindload='loadFinish' data-index="{{index}}" catchtouchstart="touchstartCallback" catchtouchmove="touchmoveCallback" catchtouchend="touchendCallback" catchtouchcancel="touchendCallback"
class="big-pic-main-image" style="transform:translate({{stv.offsetX}}px, {{stv.offsetY}}px) scale({{stv.scale}});height:{{one.height?one.height+'rpx':'100vh'}}"></image>
</view>
</swiper-item>
</swiper>
```
js上主要是针对touchmove事件进行处理,主要是需要把用户双指移动时候的offsetX offsetY scale等计算出来并通过this.setData放置到页面上的Image中。
在IOS上直接在touchmove时setData是OK的,真机浏览时也能够很流畅;但是在安卓下发现会出现明显的卡顿现象。
即使通过节流函数(throttle)到100ms级别,同样能够感觉到数据在页面上的延时。
我本来以为也许和translate这种转换有点什么关系,但是我发现即使我直接在页面上把相关数据给打出来也是一样的情况。
具体的表现基本上在滑动过程中,能够看到数字一直在变化,但是变化跟不上手指的运动(即使手指运动并不快),并且能够明显感觉到在手指停止运动后几秒钟会看到数字的跳变,以上图代码中的stv.scale为例,在手指运动过程中,这个值一直在变化(或者throttle到100ms变化一次),但是手指结束运动后,再等若干秒,stv.scale会突变,再过几秒可能才回到最终的状态。
这个在图片很多的时候特别明显。