blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-05-22 14:39:16 +08:00
Code Issues Projects Releases Wiki Activity

fix(Swipe): re-initialize when popup reopened (#8643)

Browse Source
This commit is contained in:
neverland 2021-05-01 17:07:53 +08:00 committed by GitHub
parent 8db718d2bd
commit c2b2e799e4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 18 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/swipe/Swipe.tsx
View File

@ -32,6 +32,7 @@ import {
} from '@vant/use'; } from '@vant/use';
import { useTouch } from '../composables/use-touch'; import { useTouch } from '../composables/use-touch';
import { useExpose } from '../composables/use-expose'; import { useExpose } from '../composables/use-expose';
import { onPopupReopen } from '../composables/on-popup-reopen';
const [name, bem] = createNamespace('swipe'); const [name, bem] = createNamespace('swipe');
@ -219,6 +220,7 @@ export default defineComponent({
} }
}; };
// swipe to prev item
const prev = () => { const prev = () => {
correctPosition(); correctPosition();
touch.reset(); touch.reset();
@ -232,6 +234,7 @@ export default defineComponent({
}); });
}; };
// swipe to next item
const next = () => { const next = () => {
correctPosition(); correctPosition();
touch.reset(); touch.reset();
@ -247,13 +250,11 @@ export default defineComponent({
let autoplayTimer: NodeJS.Timeout; let autoplayTimer: NodeJS.Timeout;
const stopAutoplay = () => { const stopAutoplay = () => clearTimeout(autoplayTimer);
clearTimeout(autoplayTimer);
};
const autoplay = () => { const autoplay = () => {
if (props.autoplay > 0 && count.value > 1) {
stopAutoplay(); stopAutoplay();
if (props.autoplay > 0 && count.value > 1) {
autoplayTimer = setTimeout(() => { autoplayTimer = setTimeout(() => {
next(); next();
autoplay(); autoplay();
@ -263,32 +264,30 @@ export default defineComponent({
// initialize swipe position // initialize swipe position
const initialize = (active = +props.initialSwipe) => { const initialize = (active = +props.initialSwipe) => {
if (!root.value || isHidden(root)) { if (!root.value) {
return; return;
} }
stopAutoplay(); if (!isHidden(root)) {
const rect = { const rect = {
width: root.value.offsetWidth, width: root.value.offsetWidth,
height: root.value.offsetHeight, height: root.value.offsetHeight,
}; };
state.rect = rect;
state.width = +(props.width ?? rect.width);
state.height = +(props.height ?? rect.height);
}
if (count.value) { if (count.value) {
active = Math.min(count.value - 1, active); active = Math.min(count.value - 1, active);
} }
state.rect = rect;
state.swiping = true;
state.active = active; state.active = active;
state.width = +(props.width ?? rect.width); state.swiping = true;
state.height = +(props.height ?? rect.height);
state.offset = getTargetOffset(active); state.offset = getTargetOffset(active);
children.forEach((swipe) => { children.forEach((swipe) => {
swipe.setOffset(0); swipe.setOffset(0);
}); });
autoplay();
}; };
const resize = () => initialize(state.active); const resize = () => initialize(state.active);
@ -425,20 +424,8 @@ export default defineComponent({
); );
watch(count, () => initialize(state.active)); watch(count, () => initialize(state.active));
watch([count, () => props.autoplay], autoplay);
watch(
() => props.autoplay,
(value) => {
if (value > 0) {
autoplay();
} else {
stopAutoplay();
}
}
);
watch([windowSize.width, windowSize.height], resize); watch([windowSize.width, windowSize.height], resize);
watch(usePageVisibility(), (visible) => { watch(usePageVisibility(), (visible) => {
if (visible === 'visible') { if (visible === 'visible') {
autoplay(); autoplay();
@ -449,6 +436,7 @@ export default defineComponent({
onMounted(initialize); onMounted(initialize);
onActivated(() => initialize(state.active)); onActivated(() => initialize(state.active));
onPopupReopen(() => initialize(state.active));
onDeactivated(stopAutoplay); onDeactivated(stopAutoplay);
onBeforeUnmount(stopAutoplay); onBeforeUnmount(stopAutoplay);