fix(ImagePreview): incorrect drag area (#6574)

src/image-preview/ImagePreview.js

@@ -84,6 +84,10 @@ export default createComponent({
   },
 
   data() {
+    this.imageSizes = [];
+    this.windowWidth = window.innerWidth;
+    this.windowHeight = window.innerHeight;
+
     return {
       scale: 1,
       moveX: 0,
@@ -180,16 +184,24 @@ export default createComponent({
 
     startMove(event) {
       const image = event.currentTarget;
-      const rect = image.getBoundingClientRect();
-      const winWidth = window.innerWidth;
-      const winHeight = window.innerHeight;
-
       this.touchStart(event);
+      this.setMaxMove(image.dataset.index);
       this.moving = true;
       this.startMoveX = this.moveX;
       this.startMoveY = this.moveY;
-      this.maxMoveX = Math.max(0, (rect.width - winWidth) / 2);
+    },
-      this.maxMoveY = Math.max(0, (rect.height - winHeight) / 2);
+
+    setMaxMove(index) {
+      const { scale, windowWidth, windowHeight } = this;
+
+      if (this.imageSizes[index]) {
+        const { displayWidth, displayHeight } = this.imageSizes[index];
+        this.maxMoveX = Math.max(0, (displayWidth * scale - windowWidth) / 2);
+        this.maxMoveY = Math.max(0, (displayHeight * scale - windowHeight) / 2);
+      } else {
+        this.maxMoveX = 0;
+        this.maxMoveY = 0;
+      }
     },
 
     startZoom(event) {
@@ -199,6 +211,31 @@ export default createComponent({
       this.startDistance = getDistance(event.touches);
     },
 
+    onImageLoad(event, index) {
+      const { windowWidth, windowHeight } = this;
+      const { naturalWidth, naturalHeight } = event.target;
+      const windowRatio = windowHeight / windowWidth;
+      const imageRatio = naturalHeight / naturalWidth;
+
+      let displayWidth;
+      let displayHeight;
+
+      if (imageRatio < windowRatio) {
+        displayWidth = windowWidth;
+        displayHeight = windowWidth * imageRatio;
+      } else {
+        displayWidth = windowHeight / imageRatio;
+        displayHeight = windowHeight;
+      }
+
+      this.imageSizes[index] = {
+        naturalWidth,
+        naturalHeight,
+        displayWidth,
+        displayHeight,
+      };
+    },
+
     onImageTouchStart(event) {
       const { touches } = event;
       const { offsetX = 0 } = this.$refs.swipe || {};
@@ -335,12 +372,16 @@ export default createComponent({
                 src={image}
                 fit="contain"
                 class={bem('image')}
+                data-index={index}
                 scopedSlots={imageSlots}
                 style={index === this.active ? this.imageStyle : null}
                 nativeOnTouchstart={this.onImageTouchStart}
                 nativeOnTouchmove={this.onImageTouchMove}
                 nativeOnTouchend={this.onImageTouchEnd}
                 nativeOnTouchcancel={this.onImageTouchEnd}
+                onLoad={(event) => {
+                  this.onImageLoad(event, index);
+                }}
               />
             </SwipeItem>
           ))}

src/image-preview/test/__snapshots__/index.spec.js.snap

@@ -61,7 +61,7 @@ exports[`set show-index prop to false 1`] = `
 `;
 
 exports[`zoom 1`] = `
-<div class="van-image van-image-preview__image" style="transition-duration: 0s; transform: scale(2, 2) translate(0px, NaNpx);"><img src="https://img.yzcdn.cn/1.png" class="van-image__img" style="object-fit: contain;">
+<div class="van-image van-image-preview__image" style="transition-duration: 0s; transform: scale(2, 2) translate(0px, 0px);" data-index="0"><img src="https://img.yzcdn.cn/1.png" class="van-image__img" style="object-fit: contain;">
   <div class="van-image__loading">
     <div class="van-loading van-loading--spinner"><span class="van-loading__spinner van-loading__spinner--spinner"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span></div>
   </div>