uniapp预览图片组件记录

前言

简单记录一下，图片缩放和切换预览。

实现思路

使用movable-area可以实现缩放，结合swiper

代码部分

页面

<swiper :duration="200" :disable-touch="!isSwiper"
      :indicator-dots="false" :autoplay="false">
      <swiper-item >
        <movable-area scale-area>
          <movable-view"
            direction="all" :out-of-bounds="false" damping="90" friction="2" scale="true" scale-min="1" scale-max="4">           
            <image class="image-cover"  style="width: 100%;"  mode="aspectFit"></image>
          </movable-view>
        </movable-area>
      </swiper-item>
    </swiper>

js

data() {
      return {
        isSwiper: true,
      }
    },
methods: {
 scaleView(e) {
         //当放大超出1倍就把切换禁用，不然会一起切换导致预览不全
        if (e.detail.scale > 1) {
          this.isSwiper = false
        } else {
          this.isSwiper = true
        }
    }
}

总结

缺点是性能不太好，如果没自定义需求最好还是使用官方提供的api