assess-app/components/PreviewImage/index.vue

<template>
  <view>
    <uni-popup ref="popup" type="center">
      <view class="popup-container" @click="close">

        <swiper
          class="swiper"
          :current="current"
          :duration="500"
          @change="swiperChange"
          @click.stop
        >

          <swiper-item
            class="imgs-item"
            v-for="(item, index) in imgs"
            :key="index"
          >
            <movable-area scale-area class="movable-data">
            <movable-view
                class="movable-item"
                direction="all"
                :inertia="true"
                :scale="true"
                scale-min="1"
                scale-max="4"
            >
              <image :src="item.img" mode="aspectFit" class="img"  />
            </movable-view>
            </movable-area>
          </swiper-item>

        </swiper>

        <view class="count">{{ count }}/{{ imgs.length }}</view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  name: "PreviewImage",
  props: {
    imgs: {
      type: Array,
    },
    current: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      count: 1,
    };
  },

  methods: {
    swiperChange(e) {
      this.count = e.detail.current + 1;
    },
    open(index) {
      this.count = index + 1;
      this.$refs.popup.open();
    },
    close() {
      this.$refs.popup.close();
    },
  },
};
</script>

<style lang="scss" scoped>
.popup-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;

  .count {
    position: absolute;
    bottom: 192px;
    right: 10px;
    width: 80px;
    height: 30px;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 30px;
    text-align: center;
    line-height: 30px;
  }
}
.swiper {
  width: 100%;
  height: 450px !important;
}
.imgs-item {
  height: 100%;
  .movable-data{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    .movable-item{
      height: 100%;
      width: 100%;
      position:fixed;
      overflow: hidden;
      .img {
        width: 100%;
        height: 100%;
        background-color: rgb(238, 238, 238);
      }
    }



  }

}
</style>