mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
[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:
parent
f02048a3dc
commit
4dfa56e796
@ -10,7 +10,6 @@ export default {
|
||||
|
||||
beforeCreate() {
|
||||
this.$parent.swipes.push(this);
|
||||
this.$parent.childrenOffset.push(0);
|
||||
},
|
||||
|
||||
data() {
|
||||
|
@ -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);
|
||||
}
|
||||
|
||||
|
Loading…
x
Reference in New Issue
Block a user