滚页和滑页的使用案例

这里展示了滚页和滑页的常见使用案例。了解如何制作移动端和桌面端应用中的垂直和水平滚动视图、如何正确地设置滚动属性，以及用于滚动相关交互的触发和反应。

请查看以下案例中的交互，下载源文件亲自尝试。此外，还可以阅览教程，学习每个原型的制作步骤。

实际使用案例

• 阅览社交媒体应用
• 上下滚动消息列表
• 循环滚动播放
• 滚动式时间选择器
• 向左和向右滑动页面
• 无限循环滚动

阅览社交媒体应用

像现在大多数社交媒体应用一样，您可以通过水平和垂直滚动浏览不同的人像和照片。了解如何在滚动视图中添加边距，制作近乎真实应用的UI（滚动末尾的空间）。

下载和体验案例中的原型

查看教程学习制作方法

上下滚动消息列表

上下滚动消息应用或邮箱里的消息列表。创建一个滚动容器，学习如何自定义开始滚动的位置（例如，从底部开始滚动）。

下载和体验案例中的原型

查看教程学习制作方法

循环滚动播放

制作像网购平台或视频平台上一样的图片轮播效果。了解如何使用滑页容器层制作循环动效，以及如何在滚动时使用变量替换图片题目。

下载和体验案例中的原型

查看教程学习制作方法

滚动式时间选择器

制作您需要的滚动式时间选择器，可以设置日期、时间等等。通过滚动式选择器，可以快速地上下滚动多个选项。当选项列表超出显示区域无法完全显示时，滚动式选择器是一种有效的解决方法。

下载和体验案例中的原型

查看教程学习制作方法

向左和向右滑动页面

使页面可以从中间向左和向右滑动。了解如何设置容器层属性来实现该此交互。

下载和体验案例中的原型

查看教程学习制作方法

无限循环滚动

使页面向左右两个方向无限滚动。了解如何使用滑页容器层，以及如何使用范围触发实现无限滚动。

下载和体验案例中的原型

查看教程学习制作方法