滚页和滑页的使用案例

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

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

实际使用案例

阅览社交媒体应用

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

[object Object]

下载和体验案例中的原型

查看教程学习制作方法

上下滚动消息列表

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

[object Object]

下载和体验案例中的原型

查看教程学习制作方法

循环滚动播放

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

[object Object]

下载和体验案例中的原型

查看教程学习制作方法

滚动式时间选择器

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

[object Object]

下载和体验案例中的原型

查看教程学习制作方法

向左和向右滑动页面

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

[object Object]

下载和体验案例中的原型

查看教程学习制作方法

无限循环滚动

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

[object Object]

下载和体验案例中的原型

查看教程学习制作方法

Back To Top