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 @@
- 5 ? 0 : current + 1">
+
跳转到第 {{ 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();
},
);