uniapp movable-view 组件
插件市场看到一个图片预览组件还不错,快速实现图片预览正好用上。
组件里面使用了 uniapp movable-view 组件实现缩放。但是缩放幅度太大,没有用户体验。
最终找到原因是 scale事件的问题,注释掉组件的这个方法即可解决。
手动修改源码后的部分代码:
<movable-area class="movable_area">
<movable-view direction="all" class="movale_" :animation="false" :style="movableStyle" scale out-of-bounds
:scale-value="scaleValue" :scale-min="0.6" :scale-max="4" @scale="scale">
<image class="preview_image" :src="previewSrc" mode="widthFix" :style="{width: previewWidth}"></image>
</movable-view>
</movable-area>
// vue2 options 写法核心代码
// 节流思路,但是uniapp官方已经开发好了,就没有必要了
scale(e) {
const step = Math.sign(this.scaleValue - e.detail.scale)
console.log(step, this.scaleValue, 'step this.scaleValue old');
this.scaleValue += (0.1 * step)
console.log(step, this.scaleValue, 'step this.scaleValue new');
},
scaleHandle: throttle(function(e) {
// this.scale(e)
}, 1000)