fix(ImagePreview): should not close when click index (#4764)

src/image-preview/ImagePreview.js

@@ -13,8 +13,8 @@ const [createComponent, bem] = createNamespace('image-preview');
 
 function getDistance(touches) {
   return Math.sqrt(
-    ((touches[0].clientX - touches[1].clientX) ** 2) +
+    (touches[0].clientX - touches[1].clientX) ** 2 +
-    ((touches[0].clientY - touches[1].clientY) ** 2)
+      (touches[0].clientY - touches[1].clientY) ** 2
   );
 }
 
@@ -69,9 +69,9 @@ export default createComponent({
       scale: 1,
       moveX: 0,
       moveY: 0,
+      active: 0,
       moving: false,
       zooming: false,
-      active: 0,
       doubleClickTimer: null
     };
   },
@@ -264,11 +264,16 @@ export default createComponent({
         <Swipe
           ref="swipe"
           loop={this.loop}
+          class={bem('swipe')}
           duration={this.swipeDuration}
           indicatorColor="white"
           initialSwipe={this.startPosition}
           showIndicators={this.showIndicators}
           onChange={this.setActive}
+          nativeOnTouchstart={this.onWrapperTouchStart}
+          nativeOnTouchMove={preventDefault}
+          nativeOnTouchend={this.onWrapperTouchEnd}
+          nativeOnTouchcancel={this.onWrapperTouchEnd}
         >
           {this.images.map((image, index) => (
             <SwipeItem>
@@ -298,13 +303,7 @@ export default createComponent({
 
     return (
       <transition name="van-fade">
-        <div
+        <div class={[bem(), this.className]}>
-          class={[bem(), this.className]}
-          onTouchstart={this.onWrapperTouchStart}
-          onTouchMove={preventDefault}
-          onTouchend={this.onWrapperTouchEnd}
-          onTouchcancel={this.onWrapperTouchEnd}
-        >
           {this.genImages()}
           {this.genIndex()}
         </div>

src/image-preview/index.less

@@ -7,6 +7,10 @@
   width: 100%;
   height: 100%;
 
+  &__swipe {
+    height: 100%;
+  }
+
   &__image {
     position: absolute;
     top: 0;
@@ -33,8 +37,4 @@
   &__overlay {
     background-color: @image-preview-overlay-background-color;
   }
-
-  .van-swipe {
-    height: 100%;
-  }
 }

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

@@ -2,7 +2,7 @@
 
 exports[`index slot 1`] = `
 <div class="van-image-preview" name="van-fade">
-  <div class="van-swipe">
+  <div class="van-swipe van-image-preview__swipe">
     <div class="van-swipe__track" style="width: 0px; transition-duration: 0ms; transform: translateX(0px);"></div>
   </div>
   <div class="van-image-preview__index">Custom Index</div>
@@ -11,7 +11,7 @@ exports[`index slot 1`] = `
 
 exports[`lazy-load prop 1`] = `
 <div class="van-image-preview" name="van-fade">
-  <div class="van-swipe">
+  <div class="van-swipe van-image-preview__swipe">
     <div class="van-swipe__track" style="width: 0px; transition-duration: 0ms; transform: translateX(0px);">
       <div class="van-swipe-item" style="width: 0px; height: 100%; transform: translateX(0px);">
         <div class="van-image van-image-preview__image" style="transition-duration: .3s;"><img class="van-image__img" style="object-fit: contain;">
@@ -42,7 +42,7 @@ exports[`lazy-load prop 1`] = `
 
 exports[`render image 1`] = `
 <div class="van-image-preview" name="van-fade">
-  <div class="van-swipe">
+  <div class="van-swipe van-image-preview__swipe">
     <div class="van-swipe__track" style="width: 0px; transition-duration: 500ms; transform: translateX(0px);">
       <div class="van-swipe-item" style="width: 0px; height: 100%; transform: translateX(0px);">
         <div class="van-image van-image-preview__image" style="transition-duration: .3s;"><img src="https://img.yzcdn.cn/1.png" class="van-image__img" style="object-fit: contain;">
@@ -73,7 +73,7 @@ exports[`render image 1`] = `
 
 exports[`set show-index prop to false 1`] = `
 <div class="van-image-preview" name="van-fade">
-  <div class="van-swipe">
+  <div class="van-swipe van-image-preview__swipe">
     <div class="van-swipe__track" style="width: 0px; transition-duration: 0ms; transform: translateX(0px);"></div>
   </div>
 </div>
@@ -81,7 +81,7 @@ exports[`set show-index prop to false 1`] = `
 
 exports[`zoom 1`] = `
 <div class="van-image-preview" name="van-fade">
-  <div class="van-swipe">
+  <div class="van-swipe van-image-preview__swipe">
     <div class="van-swipe__track" style="transition-duration: 500ms; width: 0px; transform: translateX(0px);">
       <div class="van-swipe-item" style="width: 100px; height: 100%; transform: translateX(0px);">
         <div class="van-image van-image-preview__image" style="transition-duration: 0s; transform: scale3d(2, 2, 1) translate(0px, NaNpx);"><img src="https://img.yzcdn.cn/1.png" class="van-image__img" style="object-fit: contain;">