From 4dfa56e796837aabefbc81c93c0e3f6eb483e7e8 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@buaa.edu.cn>
Date: Thu, 12 Oct 2017 08:19:18 -0500
Subject: [PATCH] [bugfix] Swipe shouid re initialize when item changes (#200)

* [Document] add english document of Checkbox

* [Document] add english document of Field

* [Document] add english document of NumberKeyboard

* [bugfix] NumberKeyboard should not dispaly title when title is empty

* [Document] add english document of PasswordInput

* [Document] add english document of Radio

* [document] add english document of Switch

* [bugfix] remove redundent styles in english document

* [Document] fix details

* fix Switch test cases

* [bugfix] Swipe shouid reinitialize when item changes
---
 packages/swipe-item/index.vue |  1 -
 packages/swipe/index.vue      | 39 ++++++++++++++++++++++++++++-------
 2 files changed, 31 insertions(+), 9 deletions(-)

diff --git a/packages/swipe-item/index.vue b/packages/swipe-item/index.vue
index f9756ca16..d960e7ece 100644
--- a/packages/swipe-item/index.vue
+++ b/packages/swipe-item/index.vue
@@ -10,7 +10,6 @@ export default {
 
   beforeCreate() {
     this.$parent.swipes.push(this);
-    this.$parent.childrenOffset.push(0);
   },
 
   data() {
diff --git a/packages/swipe/index.vue b/packages/swipe/index.vue
index eb5b05a7c..90b33a77d 100644
--- a/packages/swipe/index.vue
+++ b/packages/swipe/index.vue
@@ -1,6 +1,7 @@
 <template>
   <div class="van-swipe">
     <div 
+      v-if="count > 1"
       :style="trackStyle"
       class="van-swipe__track"
       @touchstart="onTouchStart"
@@ -11,6 +12,12 @@
     >
       <slot></slot>
     </div>
+    <div 
+      v-else
+      class="van-swipe__track"
+    >
+      <slot></slot>
+    </div>
     <div class="van-swipe__indicators" v-if="showIndicators && count > 1">
       <i v-for="index in count" :class="{ 'van-swipe__indicator--active': index - 1 === activeIndicator }" />
     </div>
@@ -41,7 +48,6 @@ export default {
       active: 0,
       deltaX: 0,
       swipes: [],
-      childrenOffset: [],
       direction: '',
       currentDuration: 0,
       width: window.innerWidth
@@ -49,8 +55,13 @@ export default {
   },
 
   mounted() {
-    this.move(0);
-    this.autoPlay();
+    this.initialize();
+  },
+
+  watch: {
+    swipes() {
+      this.initialize();
+    }
   },
 
   computed: {
@@ -59,7 +70,7 @@ export default {
     },
 
     trackStyle() {
-      return this.count === 1 ? {} : {
+      return {
         paddingLeft: this.width + 'px',
         width: (this.count + 2) * this.width + 'px',
         transitionDuration: `${this.currentDuration}ms`,
@@ -73,6 +84,18 @@ export default {
   },
 
   methods: {
+    initialize() {
+      // reset offset when children changes
+      clearTimeout(this.timer);
+      this.active = 0;
+      this.currentDuration = 0;
+      this.offset = this.count > 1 ? -this.width : 0;
+      this.swipes.forEach(swipe => {
+        swipe.offset = 0;
+      });
+      this.autoPlay();
+    },
+
     onTouchStart(event) {
       clearTimeout(this.timer);
 
@@ -82,10 +105,10 @@ export default {
       this.startX = event.touches[0].clientX;
       this.startY = event.touches[0].clientY;
 
-      if (this.active === -1) {
+      if (this.active <= -1) {
         this.move(this.count);
       }
-      if (this.active === this.count) {
+      if (this.active >= this.count) {
         this.move(-this.count);
       }
     },
@@ -115,7 +138,7 @@ export default {
         if (active === -1) {
           swipes[count - 1].offset = 0;
         }
-        swipes[0].offset = active === count - 1 ? count * width : 0;
+        swipes[0].offset = active === count - 1 && move > 0 ? count * width : 0;
 
         this.active += move;
       } else {
@@ -135,7 +158,7 @@ export default {
         this.timer = setTimeout(() => {
           this.currentDuration = 0;
 
-          if (this.active === this.count) {
+          if (this.active >= this.count) {
             this.move(-this.count);
           }