Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

swiper组件虚拟滚动设置为竖直方向时,最后一条无法展示 #6793

Open
hcxmj opened this issue Dec 9, 2024 · 3 comments
Open
Labels
bug need reproduce We cannot reproduce your problem

Comments

@hcxmj
Copy link

hcxmj commented Dec 9, 2024

Version of antd-mobile

5.37.1

Operating system and its version

iOS, Android

Browser and its version

Chrome:131.0.6778.86

Sandbox to reproduce

No response

What happened?

设置竖直方向虚拟滚动, 默认定位到第一条展示为空, 需要上滑一次才能切换到第一条数据,且最后一条数据无法正常展示, 不能切换到页面中进行展示

Relevant log output

<Swiper
          direction="vertical"
          indicator={() => null}
          onIndexChange={(index) => handleIndexChange(index)}
          total={total}
          style={{ '--height': '200px' }}
          defaultIndex={0}
          stuckAtBoundary={false}
          slideSize={100}
          loop={false}
        >
          {index => (
            <Swiper.Item key={index}>
              <div style={{ color: '#fff' }}>
              {index + 1}
              </div>
            </Swiper.Item>
          )}
        </Swiper>
@hcxmj hcxmj added the bug label Dec 9, 2024
@hcxmj
Copy link
Author

hcxmj commented Dec 10, 2024

共有4条数据时,实际的表现是默认第一屏为空,上滑切换展示第一条,继续上滑第三条数据无法展示出;展示效果依次是 空白、第一条数据、第二条数据、第四条数据;

@zombieJ zombieJ added the need reproduce We cannot reproduce your problem label Dec 10, 2024
Copy link
Contributor

Hi, hcxmj.

Please provide a online reproduction so that we can help you troubleshoot the problem. You can create a demo by codesandbox or stackblitz.

我们需要你提供一个在线的重现实例,以便于我们帮你排查问题。你可以通过 codesandboxstackblitz 创建一个实例。

@hcxmj
Copy link
Author

hcxmj commented Dec 10, 2024

Hi, hcxmj.

Please provide a online reproduction so that we can help you troubleshoot the problem. You can create a demo by codesandbox or stackblitz.

我们需要你提供一个在线的重现实例,以便于我们帮你排查问题。你可以通过 codesandboxstackblitz 创建一个实例。

如这个demo所示,基本上是把文档上的搬过来了代码地址

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug need reproduce We cannot reproduce your problem
Projects
None yet
Development

No branches or pull requests

2 participants