diff --git a/src/swiper/demos/current.vue b/src/swiper/demos/current.vue index 7cbeb07df..7d19c87bb 100644 --- a/src/swiper/demos/current.vue +++ b/src/swiper/demos/current.vue @@ -12,7 +12,7 @@
- + 跳转到第 {{ current + 2 >= 6 ? 1 : current + 2 }} 项
@@ -33,10 +33,16 @@ const current = ref(0); const handleChange = (index: number, context: any) => { console.log('基础示例,页数变化到》》》', index, context); + current.value = index; }; const handleClick = (value: number) => { console.log('click: ', value); + current.value = value; +}; + +const changeCurrent = () => { + current.value = current.value + 2 > 5 ? 0 : current.value + 1; }; diff --git a/src/swiper/swiper.tsx b/src/swiper/swiper.tsx index dd1d89af9..b6046bd2f 100644 --- a/src/swiper/swiper.tsx +++ b/src/swiper/swiper.tsx @@ -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 previous = ref(currentIndex.value ?? 0); const animating = ref(false); const disabled = ref(false); @@ -77,9 +78,10 @@ export default defineComponent({ props.onClick?.(currentIndex.value ?? 0); }; - const move = (step: number, source: SwiperChangeSource, isReset = false) => { + const move = (step: number, source: SwiperChangeSource, isReset = false, targetValue?: number) => { animating.value = true; - processIndex(isReset ? step : (currentIndex.value as number) + step, source); + const innerTargetValue = targetValue ?? (isReset ? step : currentIndex.value + step); + processIndex(innerTargetValue, source); const moveDirection = !isVertical.value ? 'X' : 'Y'; const distance = root.value?.[isVertical.value ? 'offsetHeight' : 'offsetWidth'] ?? 0; @@ -117,6 +119,11 @@ export default defineComponent({ move(1, source); }; + const innerSetCurrent = (val: number) => { + setCurrent(val); + previous.value = val; + }; + const processIndex = (index: number, source: SwiperChangeSource) => { const max = items.value.length; let val = index; @@ -127,7 +134,7 @@ export default defineComponent({ if (index >= max) { val = props.loop ? 0 : max - 1; } - setCurrent(val); + innerSetCurrent(val); context.emit('update:current', val); context.emit('change', val, { source }); }; @@ -219,11 +226,11 @@ export default defineComponent({ watch(currentIndex, updateContainerHeight); watch( () => props.current, - () => { + (val, oldVal) => { // v-model动态更新时不触发move逻辑 - if (props.current === currentIndex.value) return; + if (val === previous.value) return; stopAutoplay(); - move(props.current - currentIndex.value, 'autoplay'); + move(val - oldVal, 'autoplay', false, val); startAutoplay(); }, );