From 0f8147bc6ca5d315b6ad71fe79a1a76837419692 Mon Sep 17 00:00:00 2001 From: xifanTT <514329552@qq.com> Date: Sat, 30 Nov 2024 11:14:59 +0800 Subject: [PATCH 1/3] fix: fix swiper's current dynamically update failed --- src/swiper/demos/current.vue | 5 +++-- src/swiper/swiper.tsx | 31 +++++++++++++++++++++++-------- 2 files changed, 26 insertions(+), 10 deletions(-) diff --git a/src/swiper/demos/current.vue b/src/swiper/demos/current.vue index 7cbeb07df..686aa68d6 100644 --- a/src/swiper/demos/current.vue +++ b/src/swiper/demos/current.vue @@ -12,8 +12,8 @@
- - 跳转到第 {{ current + 2 >= 6 ? 1 : current + 2 }} 项 + + 跳转到第 {{ 1 + ((current + 1) % 5) }} 项
@@ -33,6 +33,7 @@ const current = ref(0); const handleChange = (index: number, context: any) => { console.log('基础示例,页数变化到》》》', index, context); + current.value = index; }; const handleClick = (value: number) => { diff --git a/src/swiper/swiper.tsx b/src/swiper/swiper.tsx index dd1d89af9..1a7f0c8a7 100644 --- a/src/swiper/swiper.tsx +++ b/src/swiper/swiper.tsx @@ -15,7 +15,7 @@ const { prefix } = config; export default defineComponent({ name: `${prefix}-swiper`, props, - emits: ['change', 'update:current', 'update:modelValue', 'transitionenter', 'transitionleave'], + emits: ['change', 'update:value', 'update:modelValue', 'transitionenter', 'transitionleave'], setup(props, context) { const swiperClass = usePrefixClass('swiper'); const swiperNavClass = usePrefixClass('swiper-nav'); @@ -30,6 +30,7 @@ export default defineComponent({ const { current: value, modelValue } = toRefs(props); const [currentIndex, setCurrent] = useVModel(value, modelValue, props.defaultCurrent); const swiperContainer = ref(null); + const previousIndex = ref(currentIndex.value || 0); const animating = ref(false); const disabled = ref(false); @@ -40,6 +41,7 @@ export default defineComponent({ const containerHeight = ref('auto'); const navigation = computed((): SwiperNavigation => props.navigation); + const swiperSource = ref('autoplay'); const isBottomPagination = computed(() => { let isShowSwiperNav = false; @@ -78,12 +80,18 @@ export default defineComponent({ }; const move = (step: number, source: SwiperChangeSource, isReset = false) => { + moveByIndex(isReset ? step : (currentIndex.value as number) + step, source, step, isReset); + }; + + const moveByIndex = (index: number, source: SwiperChangeSource, step = 1, isReset = false) => { animating.value = true; - processIndex(isReset ? step : (currentIndex.value as number) + step, source); + processIndex(index, source); + playMoveTransition(step, isReset); + }; + const playMoveTransition = (step: number, isReset = false) => { const moveDirection = !isVertical.value ? 'X' : 'Y'; const distance = root.value?.[isVertical.value ? 'offsetHeight' : 'offsetWidth'] ?? 0; - translateContainer.value = `translate${moveDirection}(${isReset ? 0 : -1 * distance * step}px)`; }; @@ -91,7 +99,6 @@ export default defineComponent({ disabled.value = false; animating.value = false; translateContainer.value = 'translateX(0)'; - updateItemPosition(); }; @@ -127,8 +134,11 @@ export default defineComponent({ if (index >= max) { val = props.loop ? 0 : max - 1; } + + swiperSource.value = source; + previousIndex.value = index; setCurrent(val); - context.emit('update:current', val); + context.emit('update:value', val); context.emit('change', val, { source }); }; @@ -217,13 +227,18 @@ export default defineComponent({ }; watch(currentIndex, updateContainerHeight); + watch( () => props.current, - () => { + (value, oldValue) => { // v-model动态更新时不触发move逻辑 - if (props.current === currentIndex.value) return; + if (value === previousIndex.value) return; stopAutoplay(); - move(props.current - currentIndex.value, 'autoplay'); + const max = items.value.length; + const diff = (value + max - previousIndex.value) % max; + // 检测step的方向 + const step = diff <= items.value.length / 2 ? 1 : -1; + moveByIndex(value, swiperSource.value, step); startAutoplay(); }, ); From b246809059a82aae24b73902697fec2b36c560a4 Mon Sep 17 00:00:00 2001 From: xifanTT <514329552@qq.com> Date: Sat, 30 Nov 2024 11:37:15 +0800 Subject: [PATCH 2/3] fix: fix previousIndex value in swiper --- src/swiper/demos/mobile.vue | 14 +++++++------- src/swiper/swiper.tsx | 3 ++- 2 files changed, 9 insertions(+), 8 deletions(-) diff --git a/src/swiper/demos/mobile.vue b/src/swiper/demos/mobile.vue index 32b493c55..c7ec628ba 100644 --- a/src/swiper/demos/mobile.vue +++ b/src/swiper/demos/mobile.vue @@ -26,13 +26,13 @@ diff --git a/src/swiper/swiper.tsx b/src/swiper/swiper.tsx index 1a7f0c8a7..9f421e792 100644 --- a/src/swiper/swiper.tsx +++ b/src/swiper/swiper.tsx @@ -136,7 +136,7 @@ export default defineComponent({ } swiperSource.value = source; - previousIndex.value = index; + previousIndex.value = val; setCurrent(val); context.emit('update:value', val); context.emit('change', val, { source }); @@ -233,6 +233,7 @@ export default defineComponent({ (value, oldValue) => { // v-model动态更新时不触发move逻辑 if (value === previousIndex.value) return; + console.log(value, previousIndex.value); stopAutoplay(); const max = items.value.length; const diff = (value + max - previousIndex.value) % max; From 90faeba68d2a794b5d12856cfa78f8d1d0c6009e Mon Sep 17 00:00:00 2001 From: xifanTT <514329552@qq.com> Date: Sun, 1 Dec 2024 22:57:20 +0800 Subject: [PATCH 3/3] =?UTF-8?q?fix:=20=E5=9B=9E=E9=80=80=E6=B3=A8=E9=87=8A?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/swiper/demos/mobile.vue | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/swiper/demos/mobile.vue b/src/swiper/demos/mobile.vue index c7ec628ba..32b493c55 100644 --- a/src/swiper/demos/mobile.vue +++ b/src/swiper/demos/mobile.vue @@ -26,13 +26,13 @@