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组件希望每个Swiper.Item可以根据内容高度自适应 #6513

Open
xiaoliu1990 opened this issue Jan 5, 2024 · 4 comments
Open
Labels

Comments

@xiaoliu1990
Copy link

xiaoliu1990 commented Jan 5, 2024

Version of antd-mobile

5.33.2

What is this feature about?

https://codesandbox.io/p/sandbox/modest-ully-mdvwj3?file=%2Fapp.tsx%3A7%2C73
参考地址,目前Swiper组件每个Swiper.Item的高度都是统一的,如果有多个Swiper.Item,某一个内容特别多,导致高度过高,另外一个内容少,高度按照最高的来,内容少的就会显得很空旷,例如做应用管理,首屏只显示2排,超过的点击首屏的更多按钮切换Swiper到第二页,如果第二页有4排,那首屏两排底部就会有两排高度的空白,这样体验不好。能不能通过某个参数控制是统一高度还是每个Swiper.Item高度自适应。

@ycshill
Copy link

ycshill commented Jan 17, 2024

我也遇到了这个问题,希望支持

@ycshill
Copy link

ycshill commented Jan 17, 2024

你现在怎么解决的呢

@Zachary0476
Copy link

Zachary0476 commented Feb 5, 2024

一个临时方案:针对已知高度
1、根据UI稿调整好预期的高度;
const diffHeights = [10, 20, 30 ,40]
2、


<Swiper
...xxx
>
{
[...xxx.map(s => {
return <Swiper.Item
style={{ maxHeight: ${diffHeights[activeIndex]}rem }}
...xxx
>
{
...xxx
}
</Swiper.Item>
})
}


`

@selye
Copy link

selye commented Jun 28, 2024

请问是怎么解决的呢

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

4 participants