[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
This commit is contained in:
neverland 2017-10-12 08:19:18 -05:00 committed by GitHub
parent f02048a3dc
commit 4dfa56e796
2 changed files with 31 additions and 9 deletions

View File

@ -10,7 +10,6 @@ export default {
beforeCreate() {
this.$parent.swipes.push(this);
this.$parent.childrenOffset.push(0);
},
data() {

View File

@ -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);
}