ant-design/ant-design-mobile

`swiperRef.swipeTo`在连续跨越loop边界时会混乱

Open

#6261 opened on Jul 19, 2023

View on GitHub
 (4 comments) (1 reaction) (0 assignees)TypeScript (11,238 stars) (2,313 forks)batch import
bughelp wanted

Description

Version of antd-mobile

5.32.0

Operating system and its version

No response

Browser and its version

Edge114

Sandbox to reproduce

https://codesandbox.io/s/interesting-sanderson-qzhw35

What happened?

以sandbox中的例子,Swiper中有6个Item

  • 通过swipeTo(index)连续快速切换-1和0位置时表现正常; 切换到-1并等待动画结束后再切换到0就会向另一个方向滚动
  • 连续切换-1和6位置时表现与上面相反: 慢速时正常,快速切换时方向错误

Relevant log output

No response

Contributor guide

Tech stack
typescriptreact
Domain
frontendmobile
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-2 days
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
active
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
Basic knowledge of React and TypeScriptUnderstanding of swiper/carousel behavior
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
65
Research direction
Investigate the Swiper component's swipeTo method in the source code, particularly how it handles loop boundaries when transitioning between indices. The sandbox provided (https://codesandbox.io/s/interesting sanderson qzhw35) reproduces the issue. Check the loop logic in files like `src/components/swiper/swiper.tsx` and `src/components/swiper/use swipe.ts`. Consider the interaction between animation timing and direction calculation when calling swipeTo consecutively.