uniapp 富文本长图滑动并且缩放

遇到一个需求，商品的详情页是富文本形式的，需要点击图片的时候查看大图。解析富文本的插件用的是uParse修复版-html富文本加载按照文档处理可以获取图片的点击事件，但是点击预览图片的时候，小图没有问题，但是长图的时候，图片高度最多是屏幕高度，它会把图片宽度缩小，导致看起来是一个细长的图片。没办法只能自己处理图片预览
首先把uParse点击图片的改一下，因为它默认会预览图片

    preview(src, $event) {
      console.log("typeof this.imgOptions", typeof this.imgOptions);
      // if (!this.imageUrls.length || typeof this.imgOptions === 'boolean') {

      // } else {
      // 	uni.previewImage({
      // 		current: src,
      // 		urls: this.imageUrls,
      // 		loop: this.imgOptions.loop,
      // 		indicator: this.imgOptions.indicator,
      // 		longPressActions: this.imgOptions.longPressActions
      // 	});
      // }
      if (this.imageUrls.length) {
        this.$emit("preview", src, $event);
      }
    },

自己写预览长图的时候，最大的问题，长图的话，用image标签的widthFix就可以滑动，但是无法实现缩放，，只有结合movable-area才可以缩放，但是这个时候又无法实现滑动，我的解决版本就是在movable-area里面放scroll-view，用scroll-view来包裹image。

<template>
  <view @click="back">
    <view class="img-page">
      <movable-area scale-area>
        <movable-view direction="all" scale="true" scale-min="1" scale-max="4">
          <scroll-view scroll-y class="scroll-Y">
            <view class="image_bg">
              <image
                class="item_image"
                :src="imgs[0]"
                mode="widthFix"
              />
            </view>
          </scroll-view>
        </movable-view>
      </movable-area>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      imgs: [],
      currentImg: 0,
      isPop: false,
    };
  },
  onLoad(options) {
  	//上一个页面的图片参数，这里只处理一张图片的情况
    let { imgs, current } = options;
    this.imgs = JSON.parse(imgs);
  },
  methods: {

    back() {
      if (this.isPop) {
        this.isPop = false;
        return;
      }
      try {
        this.$Router.back(1);
      } catch (e) {
        //TODO handle the exception
        uni.navigateBack();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
movable-view {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 750rpx;
  height: 100vh;
}

movable-area {
  height: 100vh;
  width: 750rpx;
  position: fixed;
  overflow: hidden;
 }

.img-page {
  height: 100vh;
}
.scroll-Y {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100vw;
}
.image_bg {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  width: 100vw;
  background-color: #000000;
}
.item_image {
  width: 100%;
  margin: auto; //这里有个小问题，flex布局下居中，如果不写这个，图片上面一部分会被截取掉
}



</style>