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)  

组件地址 

 

点此发表评论
暂无评论