轮播展示
它在有限区域中逐项展示一组内容,用户可以横向切换到前后项目。
- 一张张左右滑的图片
- 首页会自己换图的那一块
- 横着划可以看下一张的卡片
- 轮播图
- 横向轮播
- 滑动卡片组
示例
Web / iOS / Android 对照
Web需自己实现
桌面与移动端现代浏览器
Carousel
也叫 Slider
网页没有原生轮播组件,需要自行实现切换、暂停、焦点、当前项说明和触摸手势。
通常怎么做:优先使用可横向滚动列表;自动播放时必须提供暂停控制并避免抢焦点。
iOS原生支持
iOS / iPadOS
Page View
也叫 Paged Tab View
SwiftUI: TabView + PageTabViewStyle|UIKit: UIPageViewController
Android原生支持
Android 手机 / 平板
Carousel
Compose Material 3: HorizontalMultiBrowseCarousel / HorizontalUncontainedCarousel
使用规范
什么时候用
- 一组视觉内容地位相近,并且横向浏览比同时铺开更节省空间
什么时候别用
- 关键内容不能隐藏、用户必须比较所有项目,或自动轮播会打断阅读
容易混淆
给 AI 的提示词
这条词条还没有经过验证的实现提示词。