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() {
|
beforeCreate() {
|
||||||
this.$parent.swipes.push(this);
|
this.$parent.swipes.push(this);
|
||||||
this.$parent.childrenOffset.push(0);
|
|
||||||
},
|
},
|
||||||
|
|
||||||
data() {
|
data() {
|
||||||
|
@ -1,6 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="van-swipe">
|
<div class="van-swipe">
|
||||||
<div
|
<div
|
||||||
|
v-if="count > 1"
|
||||||
:style="trackStyle"
|
:style="trackStyle"
|
||||||
class="van-swipe__track"
|
class="van-swipe__track"
|
||||||
@touchstart="onTouchStart"
|
@touchstart="onTouchStart"
|
||||||
@ -11,6 +12,12 @@
|
|||||||
>
|
>
|
||||||
<slot></slot>
|
<slot></slot>
|
||||||
</div>
|
</div>
|
||||||
|
<div
|
||||||
|
v-else
|
||||||
|
class="van-swipe__track"
|
||||||
|
>
|
||||||
|
<slot></slot>
|
||||||
|
</div>
|
||||||
<div class="van-swipe__indicators" v-if="showIndicators && count > 1">
|
<div class="van-swipe__indicators" v-if="showIndicators && count > 1">
|
||||||
<i v-for="index in count" :class="{ 'van-swipe__indicator--active': index - 1 === activeIndicator }" />
|
<i v-for="index in count" :class="{ 'van-swipe__indicator--active': index - 1 === activeIndicator }" />
|
||||||
</div>
|
</div>
|
||||||
@ -41,7 +48,6 @@ export default {
|
|||||||
active: 0,
|
active: 0,
|
||||||
deltaX: 0,
|
deltaX: 0,
|
||||||
swipes: [],
|
swipes: [],
|
||||||
childrenOffset: [],
|
|
||||||
direction: '',
|
direction: '',
|
||||||
currentDuration: 0,
|
currentDuration: 0,
|
||||||
width: window.innerWidth
|
width: window.innerWidth
|
||||||
@ -49,8 +55,13 @@ export default {
|
|||||||
},
|
},
|
||||||
|
|
||||||
mounted() {
|
mounted() {
|
||||||
this.move(0);
|
this.initialize();
|
||||||
this.autoPlay();
|
},
|
||||||
|
|
||||||
|
watch: {
|
||||||
|
swipes() {
|
||||||
|
this.initialize();
|
||||||
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
computed: {
|
computed: {
|
||||||
@ -59,7 +70,7 @@ export default {
|
|||||||
},
|
},
|
||||||
|
|
||||||
trackStyle() {
|
trackStyle() {
|
||||||
return this.count === 1 ? {} : {
|
return {
|
||||||
paddingLeft: this.width + 'px',
|
paddingLeft: this.width + 'px',
|
||||||
width: (this.count + 2) * this.width + 'px',
|
width: (this.count + 2) * this.width + 'px',
|
||||||
transitionDuration: `${this.currentDuration}ms`,
|
transitionDuration: `${this.currentDuration}ms`,
|
||||||
@ -73,6 +84,18 @@ export default {
|
|||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
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) {
|
onTouchStart(event) {
|
||||||
clearTimeout(this.timer);
|
clearTimeout(this.timer);
|
||||||
|
|
||||||
@ -82,10 +105,10 @@ export default {
|
|||||||
this.startX = event.touches[0].clientX;
|
this.startX = event.touches[0].clientX;
|
||||||
this.startY = event.touches[0].clientY;
|
this.startY = event.touches[0].clientY;
|
||||||
|
|
||||||
if (this.active === -1) {
|
if (this.active <= -1) {
|
||||||
this.move(this.count);
|
this.move(this.count);
|
||||||
}
|
}
|
||||||
if (this.active === this.count) {
|
if (this.active >= this.count) {
|
||||||
this.move(-this.count);
|
this.move(-this.count);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@ -115,7 +138,7 @@ export default {
|
|||||||
if (active === -1) {
|
if (active === -1) {
|
||||||
swipes[count - 1].offset = 0;
|
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;
|
this.active += move;
|
||||||
} else {
|
} else {
|
||||||
@ -135,7 +158,7 @@ export default {
|
|||||||
this.timer = setTimeout(() => {
|
this.timer = setTimeout(() => {
|
||||||
this.currentDuration = 0;
|
this.currentDuration = 0;
|
||||||
|
|
||||||
if (this.active === this.count) {
|
if (this.active >= this.count) {
|
||||||
this.move(-this.count);
|
this.move(-this.count);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user