feat(ImagePreview): add image loading tip (#4378)

src/image-preview/ImagePreview.js

@@ -4,6 +4,8 @@ import { preventDefault } from '../utils/dom/event';
 import { PopupMixin } from '../mixins/popup';
 import { TouchMixin } from '../mixins/touch';
 import { CloseOnPopstateMixin } from '../mixins/close-on-popstate';
+import Image from '../image';
+import Loading from '../loading';
 import Swipe from '../swipe';
 import SwipeItem from '../swipe-item';
 
@@ -19,11 +21,7 @@ function getDistance(touches) {
 }
 
 export default createComponent({
-  mixins: [
-    PopupMixin,
-    TouchMixin,
-    CloseOnPopstateMixin
-  ],
+  mixins: [PopupMixin, TouchMixin, CloseOnPopstateMixin],
 
   props: {
     className: null,
@@ -253,6 +251,51 @@ export default createComponent({
       this.scale = scale;
       this.moveX = 0;
       this.moveY = 0;
+    },
+
+    genIndex() {
+      if (this.showIndex) {
+        return (
+          <div class={bem('index')}>
+            {this.slots('index') || `${this.active + 1}/${this.images.length}`}
+          </div>
+        );
+      }
+    },
+
+    genImages() {
+      const imageSlots = {
+        loading: () => <Loading type="spinner" />
+      };
+
+      return (
+        <Swipe
+          ref="swipe"
+          loop={this.loop}
+          duration={this.swipeDuration}
+          indicatorColor="white"
+          initialSwipe={this.startPosition}
+          showIndicators={this.showIndicators}
+          onChange={this.setActive}
+        >
+          {this.images.map((image, index) => (
+            <SwipeItem>
+              <Image
+                src={image}
+                fit="contain"
+                class={bem('image')}
+                lazyLoad={this.lazyLoad}
+                scopedSlots={imageSlots}
+                style={index === this.active ? this.imageStyle : null}
+                nativeOnTouchstart={this.onImageTouchStart}
+                nativeOnTouchmove={this.onImageTouchMove}
+                nativeOnTouchend={this.onImageTouchEnd}
+                nativeOnTouchcancel={this.onImageTouchEnd}
+              />
+            </SwipeItem>
+          ))}
+        </Swipe>
+      );
     }
   },
 
@@ -261,48 +304,6 @@ export default createComponent({
       return;
     }
 
-    const { active, images } = this;
-
-    const Index = this.showIndex && (
-      <div class={bem('index')}>
-        {this.slots('index') || `${active + 1}/${images.length}`}
-      </div>
-    );
-
-    const Images = (
-      <Swipe
-        ref="swipe"
-        loop={this.loop}
-        duration={this.swipeDuration}
-        indicatorColor="white"
-        initialSwipe={this.startPosition}
-        showIndicators={this.showIndicators}
-        onChange={this.setActive}
-      >
-        {images.map((image, index) => {
-          const props = {
-            class: bem('image'),
-            style: index === active ? this.imageStyle : null,
-            on: {
-              touchstart: this.onImageTouchStart,
-              touchmove: this.onImageTouchMove,
-              touchend: this.onImageTouchEnd,
-              touchcancel: this.onImageTouchEnd
-            }
-          };
-          return (
-            <SwipeItem>
-              {this.lazyLoad ? (
-                <img vLazy={image} {...props} />
-              ) : (
-                <img src={image} {...props} />
-              )}
-            </SwipeItem>
-          );
-        })}
-      </Swipe>
-    );
-
     return (
       <transition name="van-fade">
         <div
@@ -312,8 +313,8 @@ export default createComponent({
           onTouchend={this.onWrapperTouchEnd}
           onTouchcancel={this.onWrapperTouchEnd}
         >
-          {Images}
-          {Index}
+          {this.genImages()}
+          {this.genIndex()}
         </div>
       </transition>
     );