feat: H5 端 uni.previewImage 支持移动端手势缩放 close #1170

build/manifest.js

@@ -33,6 +33,8 @@ const DEPS = {
   previewImage: [
     ['/core/view/components/swiper/index.vue', 'Swiper'],
     ['/core/view/components/swiper-item/index.vue', 'SwiperItem'],
+    ['/core/view/components/movable-area/index.vue', 'MovableArea'],
+    ['/core/view/components/movable-view/index.vue', 'MovableView'],
     ['/platforms/h5/components/system-routes/preview-image/index.vue', 'PreviewImage']
   ],
   showToast: TOAST_DEPS,

src/platforms/h5/components/system-routes/preview-image/image-view.vue

+<template>
+  <v-uni-movable-area
+    class="image-view-area"
+    @touchstart.native="onTouchStart"
+    @touchmove.native="checkDirection"
+    @touchend.native="onTouchEnd"
+  >
+    <v-uni-movable-view
+      class="image-view-view"
+      :direction="direction"
+      inertia
+      scale
+      scale-min="1"
+      scale-max="4"
+      @scale="onScale"
+    >
+      <img
+        :src="src"
+        class="image-view-img"
+        @load="onImgLoad"
+      >
+    </v-uni-movable-view>
+  </v-uni-movable-area>
+</template>
+
+<script>
+export default {
+  name: 'ImageView',
+  props: {
+    src: {
+      type: String,
+      default: ''
+    }
+  },
+  data () {
+    return {
+      direction: 'none'
+    }
+  },
+  created () {
+    this.scale = 1
+    this.imgWidth = 0
+    this.imgHeight = 0
+    this.width = 0
+    this.height = 0
+  },
+  methods: {
+    onScale ({ detail: { scale } }) {
+      this.scale = scale
+    },
+    onImgLoad (event) {
+      const target = event.target
+      const rect = target.getBoundingClientRect()
+      this.imgWidth = rect.width
+      this.imgHeight = rect.height
+    },
+    onTouchStart (event) {
+      const $el = this.$el
+      const rect = $el.getBoundingClientRect()
+      this.width = rect.width
+      this.height = rect.height
+      this.checkDirection(event)
+    },
+    onTouchEnd (event) {
+      const scale = this.scale
+      const horizontal = scale * this.imgWidth > this.width
+      const vertical = scale * this.imgHeight > this.height
+      if (horizontal && vertical) {
+        this.direction = 'all'
+      } else if (horizontal) {
+        this.direction = 'horizontal'
+      } else if (vertical) {
+        this.direction = 'vertical'
+      } else {
+        this.direction = 'none'
+      }
+      this.checkDirection(event)
+    },
+    checkDirection (event) {
+      // 避免水平滑动和 swiper 冲突
+      const direction = this.direction
+      if (direction === 'all' || direction === 'horizontal') {
+        event.stopPropagation()
+      }
+    }
+  }
+}
+</script>
+
+<style>
+.image-view-area,
+.image-view-view {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+}
+.image-view-img {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  max-height: 100%;
+  max-width: 100%;
+}
+</style>

src/platforms/h5/components/system-routes/preview-image/index.vue

 <template>
   <div
     class="uni-system-preview-image"
-    @click="_click"
+    @click="_click"
   >
     <v-uni-swiper
       :current.sync="index"
       :indicator-dots="false"
       :autoplay="false"
-      class="uni-swiper"
+      class="uni-system-preview-image-swiper"
     >
       <v-uni-swiper-item
         v-for="(src,key) in urls"
-        :key="key"
+        :key="key"
       >
-        <img
-          :src="src"
-          class="uni-preview-image"
-        >
+        <image-view :src="src" />
       </v-uni-swiper-item>
     </v-uni-swiper>
   </div>
 </template>
 
 <script>
+import imageView from './image-view'
+
 export default {
   name: 'SystemPreviewImage',
+  components: {
+    imageView
+  },
   data () {
     const {
       urls,
@@ -74,19 +76,11 @@ export default {
   height: 100%;
   background: black;
 }
-.uni-swiper {
+.uni-system-preview-image-swiper {
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
 }
-.uni-preview-image {
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  max-height: 100%;
-  max-width: 100%;
-}
 </style>