blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

[bugfix] Swipe: emit change event in correct time (#2909)

Browse Source
This commit is contained in:
neverland 2019-03-05 21:37:44 +08:00 committed by GitHub
parent 1aa07fece1
commit c9e578c0cf
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 25 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
packages/swipe/index.js
View File

@ -170,7 +170,7 @@ export default sfc({
if (this.isCorrectDirection) { if (this.isCorrectDirection) {
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();
this.move(0, Math.min(Math.max(this.delta, -this.size), this.size)); this.move({ offset: Math.min(Math.max(this.delta, -this.size), this.size) });
} }
}, },
@ -179,35 +179,42 @@ export default sfc({
if (this.delta && this.isCorrectDirection) { if (this.delta && this.isCorrectDirection) {
const offset = this.vertical ? this.offsetY : this.offsetX; const offset = this.vertical ? this.offsetY : this.offsetX;
this.move(offset > 0 ? (this.delta > 0 ? -1 : 1) : 0); this.move({
pace: offset > 0 ? (this.delta > 0 ? -1 : 1) : 0,
emitChange: true
});
} }
this.swiping = false; this.swiping = false;
this.autoPlay(); this.autoPlay();
}, },
move(move = 0, offset = 0) { move({ pace = 0, offset = 0, emitChange }) {
const { delta, active, count, swipes, trackSize } = this; const { delta, active, count, swipes, trackSize } = this;
const atFirst = active === 0; const atFirst = active === 0;
const atLast = active === count - 1; const atLast = active === count - 1;
const outOfBounds = const outOfBounds =
!this.loop && !this.loop &&
((atFirst && (offset > 0 || move < 0)) || (atLast && (offset < 0 || move > 0))); ((atFirst && (offset > 0 || pace < 0)) || (atLast && (offset < 0 || pace > 0)));
if (outOfBounds || count <= 1) { if (outOfBounds || count <= 1) {
return; return;
} }
if (swipes[0]) { if (swipes[0]) {
swipes[0].offset = atLast && (delta < 0 || move > 0) ? trackSize : 0; swipes[0].offset = atLast && (delta < 0 || pace > 0) ? trackSize : 0;
} }
if (swipes[count - 1]) { if (swipes[count - 1]) {
swipes[count - 1].offset = atFirst && (delta > 0 || move < 0) ? -trackSize : 0; swipes[count - 1].offset = atFirst && (delta > 0 || pace < 0) ? -trackSize : 0;
} }
if (move && active + move >= -1 && active + move <= count) { if (pace && active + pace >= -1 && active + pace <= count) {
this.active += move; this.active += pace;
if (emitChange) {
this.$emit('change', this.activeIndicator);
}
} }
this.offset = offset - this.active * this.size; this.offset = offset - this.active * this.size;
@ -219,16 +226,19 @@ export default sfc({
this.correctPosition(); this.correctPosition();
setTimeout(() => { setTimeout(() => {
this.swiping = false; this.swiping = false;
this.move((index % this.count) - this.active); this.move({
pace: (index % this.count) - this.active,
emitChange: true
});
}, 30); }, 30);
}, },
correctPosition() { correctPosition() {
if (this.active <= -1) { if (this.active <= -1) {
this.move(this.count); this.move({ pace: this.count });
} }
if (this.active >= this.count) { if (this.active >= this.count) {
this.move(-this.count); this.move({ pace: -this.count });
} }
}, },
@ -248,17 +258,14 @@ export default sfc({
setTimeout(() => { setTimeout(() => {
this.swiping = false; this.swiping = false;
this.move(1); this.move({
pace: 1,
emitChange: true
});
this.autoPlay(); this.autoPlay();
}, 30); }, 30);
}, autoplay); }, autoplay);
} }
},
onTransitionend(event) {
if (event.currentTarget === this.$refs.track) {
this.$emit('change', this.activeIndicator);
}
} }
}, },
@ -288,7 +295,6 @@ export default sfc({
onTouchmove={this.onTouchMove} onTouchmove={this.onTouchMove}
onTouchend={this.onTouchEnd} onTouchend={this.onTouchEnd}
onTouchcancel={this.onTouchEnd} onTouchcancel={this.onTouchEnd}
onTransitionend={this.onTransitionend}
> >
{this.slots()} {this.slots()}
</div> </div>