From 8dd5d9aead05bca29156b97185489001c313eef7 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Fri, 27 Mar 2020 15:07:04 +0800
Subject: [PATCH] fix(Swipe): incorrect offset after resize (#5922)

---
 .../test/__snapshots__/index.spec.js.snap     | 10 ++++-----
 src/swipe/index.js                            | 21 ++++++++++++++-----
 2 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/src/image-preview/test/__snapshots__/index.spec.js.snap b/src/image-preview/test/__snapshots__/index.spec.js.snap
index b4c5692e2..5ac20fc5b 100644
--- a/src/image-preview/test/__snapshots__/index.spec.js.snap
+++ b/src/image-preview/test/__snapshots__/index.spec.js.snap
@@ -4,7 +4,7 @@ exports[`close-icon prop 1`] = `
 <div class="van-image-preview" name="van-fade"><i role="button" class="van-icon van-icon-close van-image-preview__close-icon van-image-preview__close-icon--top-right">
     <!----></i>
   <div class="van-swipe van-image-preview__swipe">
-    <div class="van-swipe__track" style="width: 0px; transition-duration: 0ms; transform: translateX(0px);"></div>
+    <div class="van-swipe__track" style="width: 0px; transition-duration: 500ms; transform: translateX(0px);"></div>
   </div>
   <div class="van-image-preview__index">1 / 0</div>
 </div>
@@ -14,7 +14,7 @@ exports[`close-icon-position prop 1`] = `
 <div class="van-image-preview" name="van-fade"><i role="button" class="van-icon van-icon-close van-image-preview__close-icon van-image-preview__close-icon--top-left">
     <!----></i>
   <div class="van-swipe van-image-preview__swipe">
-    <div class="van-swipe__track" style="width: 0px; transition-duration: 0ms; transform: translateX(0px);"></div>
+    <div class="van-swipe__track" style="width: 0px; transition-duration: 500ms; transform: translateX(0px);"></div>
   </div>
   <div class="van-image-preview__index">1 / 0</div>
 </div>
@@ -23,7 +23,7 @@ exports[`close-icon-position prop 1`] = `
 exports[`cover slot 1`] = `
 <div class="van-image-preview" name="van-fade">
   <div class="van-swipe van-image-preview__swipe">
-    <div class="van-swipe__track" style="width: 0px; transition-duration: 0ms; transform: translateX(0px);"></div>
+    <div class="van-swipe__track" style="width: 0px; transition-duration: 500ms; transform: translateX(0px);"></div>
   </div>
   <div class="van-image-preview__index">1 / 0</div>
   <div class="van-image-preview__cover">Custom Cover Content</div>
@@ -33,7 +33,7 @@ exports[`cover slot 1`] = `
 exports[`index slot 1`] = `
 <div class="van-image-preview" name="van-fade">
   <div class="van-swipe van-image-preview__swipe">
-    <div class="van-swipe__track" style="width: 0px; transition-duration: 0ms; transform: translateX(0px);"></div>
+    <div class="van-swipe__track" style="width: 0px; transition-duration: 500ms; transform: translateX(0px);"></div>
   </div>
   <div class="van-image-preview__index">Custom Index</div>
 </div>
@@ -55,7 +55,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 van-image-preview__swipe">
-    <div class="van-swipe__track" style="width: 0px; transition-duration: 0ms; transform: translateX(0px);"></div>
+    <div class="van-swipe__track" style="width: 0px; transition-duration: 500ms; transform: translateX(0px);"></div>
   </div>
 </div>
 `;
diff --git a/src/swipe/index.js b/src/swipe/index.js
index 6a8cc2847..94b41be4a 100644
--- a/src/swipe/index.js
+++ b/src/swipe/index.js
@@ -63,6 +63,7 @@ export default createComponent({
 
   data() {
     return {
+      rect: null,
       offset: 0,
       active: 0,
       deltaX: 0,
@@ -136,31 +137,40 @@ export default createComponent({
     },
 
     minOffset() {
-      const rect = this.$el.getBoundingClientRect();
       return (
-        (this.vertical ? rect.height : rect.width) - this.size * this.count
+        (this.vertical ? this.rect.height : this.rect.width) -
+        this.size * this.count
       );
     },
   },
 
   mounted() {
+    this.initRect();
     this.bindTouchEvent(this.$refs.track);
   },
 
   methods: {
+    initRect() {
+      this.rect = this.$el.getBoundingClientRect();
+    },
+
     // initialize swipe position
     initialize(active = +this.initialSwipe) {
+      if (!this.rect) {
+        return;
+      }
+
       clearTimeout(this.timer);
 
       if (this.$el && !isHidden(this.$el)) {
-        const rect = this.$el.getBoundingClientRect();
+        const { rect } = this;
         this.computedWidth = Math.round(+this.width || rect.width);
         this.computedHeight = Math.round(+this.height || rect.height);
       }
 
       this.swiping = true;
       this.active = active;
-      this.offset = this.count > 1 ? -this.size * this.active : 0;
+      this.offset = this.getTargetOffset(active);
       this.children.forEach(swipe => {
         swipe.offset = 0;
       });
@@ -169,6 +179,7 @@ export default createComponent({
 
     // @exposed-api
     resize() {
+      this.initRect();
       this.initialize(this.activeIndicator);
     },
 
@@ -228,7 +239,7 @@ export default createComponent({
       return active;
     },
 
-    getTargetOffset(targetActive, offset) {
+    getTargetOffset(targetActive, offset = 0) {
       let currentPosition = targetActive * this.size;
       if (!this.loop) {
         currentPosition = Math.min(currentPosition, -this.minOffset);