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

fix(Swipe): incorrect offset after resize (#5922)

Browse Source
This commit is contained in:
neverland 2020-03-27 15:07:04 +08:00 committed by GitHub
parent 9d96614425
commit 8dd5d9aead
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 21 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/image-preview/test/__snapshots__/index.spec.js.snap
View File

@ -4,7 +4,7 @@ exports[`close-icon prop 1`] = `
<div class="van-image-preview" name="van-fade"><i role="button" class="van-icon van-icon-close van-image-preview__close-icon van-image-preview__close-icon--top-right"> <div class="van-image-preview" name="van-fade"><i role="button" class="van-icon van-icon-close van-image-preview__close-icon van-image-preview__close-icon--top-right">
<!----></i> <!----></i>
<div class="van-swipe van-image-preview__swipe"> <div class="van-swipe van-image-preview__swipe">
<div class="van-swipe__track" style="width: 0px; transition-duration: 0ms; transform: translateX(0px);"></div> <div class="van-swipe__track" style="width: 0px; transition-duration: 500ms; transform: translateX(0px);"></div>
</div> </div>
<div class="van-image-preview__index">1 / 0</div> <div class="van-image-preview__index">1 / 0</div>
</div> </div>
@ -14,7 +14,7 @@ exports[`close-icon-position prop 1`] = `
<div class="van-image-preview" name="van-fade"><i role="button" class="van-icon van-icon-close van-image-preview__close-icon van-image-preview__close-icon--top-left"> <div class="van-image-preview" name="van-fade"><i role="button" class="van-icon van-icon-close van-image-preview__close-icon van-image-preview__close-icon--top-left">
<!----></i> <!----></i>
<div class="van-swipe van-image-preview__swipe"> <div class="van-swipe van-image-preview__swipe">
<div class="van-swipe__track" style="width: 0px; transition-duration: 0ms; transform: translateX(0px);"></div> <div class="van-swipe__track" style="width: 0px; transition-duration: 500ms; transform: translateX(0px);"></div>
</div> </div>
<div class="van-image-preview__index">1 / 0</div> <div class="van-image-preview__index">1 / 0</div>
</div> </div>
@ -23,7 +23,7 @@ exports[`close-icon-position prop 1`] = `
exports[`cover slot 1`] = ` exports[`cover slot 1`] = `
<div class="van-image-preview" name="van-fade"> <div class="van-image-preview" name="van-fade">
<div class="van-swipe van-image-preview__swipe"> <div class="van-swipe van-image-preview__swipe">
<div class="van-swipe__track" style="width: 0px; transition-duration: 0ms; transform: translateX(0px);"></div> <div class="van-swipe__track" style="width: 0px; transition-duration: 500ms; transform: translateX(0px);"></div>
</div> </div>
<div class="van-image-preview__index">1 / 0</div> <div class="van-image-preview__index">1 / 0</div>
<div class="van-image-preview__cover">Custom Cover Content</div> <div class="van-image-preview__cover">Custom Cover Content</div>
@ -33,7 +33,7 @@ exports[`cover slot 1`] = `
exports[`index slot 1`] = ` exports[`index slot 1`] = `
<div class="van-image-preview" name="van-fade"> <div class="van-image-preview" name="van-fade">
<div class="van-swipe van-image-preview__swipe"> <div class="van-swipe van-image-preview__swipe">
<div class="van-swipe__track" style="width: 0px; transition-duration: 0ms; transform: translateX(0px);"></div> <div class="van-swipe__track" style="width: 0px; transition-duration: 500ms; transform: translateX(0px);"></div>
</div> </div>
<div class="van-image-preview__index">Custom Index</div> <div class="van-image-preview__index">Custom Index</div>
</div> </div>
@ -55,7 +55,7 @@ exports[`render image 1`] = `
exports[`set show-index prop to false 1`] = ` exports[`set show-index prop to false 1`] = `
<div class="van-image-preview" name="van-fade"> <div class="van-image-preview" name="van-fade">
<div class="van-swipe van-image-preview__swipe"> <div class="van-swipe van-image-preview__swipe">
<div class="van-swipe__track" style="width: 0px; transition-duration: 0ms; transform: translateX(0px);"></div> <div class="van-swipe__track" style="width: 0px; transition-duration: 500ms; transform: translateX(0px);"></div>
</div> </div>
</div> </div>
`; `;

21
src/swipe/index.js
View File

@ -63,6 +63,7 @@ export default createComponent({
data() { data() {
return { return {
rect: null,
offset: 0, offset: 0,
active: 0, active: 0,
deltaX: 0, deltaX: 0,
@ -136,31 +137,40 @@ export default createComponent({
}, },
minOffset() { minOffset() {
const rect = this.$el.getBoundingClientRect();
return ( return (
(this.vertical ? rect.height : rect.width) - this.size * this.count (this.vertical ? this.rect.height : this.rect.width) -
this.size * this.count
); );
}, },
}, },
mounted() { mounted() {
this.initRect();
this.bindTouchEvent(this.$refs.track); this.bindTouchEvent(this.$refs.track);
}, },
methods: { methods: {
initRect() {
this.rect = this.$el.getBoundingClientRect();
},
// initialize swipe position // initialize swipe position
initialize(active = +this.initialSwipe) { initialize(active = +this.initialSwipe) {
if (!this.rect) {
return;
}
clearTimeout(this.timer); clearTimeout(this.timer);
if (this.$el && !isHidden(this.$el)) { if (this.$el && !isHidden(this.$el)) {
const rect = this.$el.getBoundingClientRect(); const { rect } = this;
this.computedWidth = Math.round(+this.width || rect.width); this.computedWidth = Math.round(+this.width || rect.width);
this.computedHeight = Math.round(+this.height || rect.height); this.computedHeight = Math.round(+this.height || rect.height);
} }
this.swiping = true; this.swiping = true;
this.active = active; this.active = active;
this.offset = this.count > 1 ? -this.size * this.active : 0; this.offset = this.getTargetOffset(active);
this.children.forEach(swipe => { this.children.forEach(swipe => {
swipe.offset = 0; swipe.offset = 0;
}); });
@ -169,6 +179,7 @@ export default createComponent({
// @exposed-api // @exposed-api
resize() { resize() {
this.initRect();
this.initialize(this.activeIndicator); this.initialize(this.activeIndicator);
}, },
@ -228,7 +239,7 @@ export default createComponent({
return active; return active;
}, },
getTargetOffset(targetActive, offset) { getTargetOffset(targetActive, offset = 0) {
let currentPosition = targetActive * this.size; let currentPosition = targetActive * this.size;
if (!this.loop) { if (!this.loop) {
currentPosition = Math.min(currentPosition, -this.minOffset); currentPosition = Math.min(currentPosition, -this.minOffset);