ProtoPie AI 已上线——现已进入 Beta 版。了解更多

ProtoPie AI 已上线——现已进入 Beta 版。了解更多

菜单

滚动 / 分页

你可以在容器的属性面板中调整其滚动或分页属性。要在容器内启用滚动或分页图层,请从图层面板将它们拖入目标容器。

滚动

此选项可启用水平或垂直滚动。为确保滚动交互顺畅运行,请确保子图层延伸到滚动容器的边界框之外。


{'_type': 'localeString', 'en': 'container scroll'}


{'_type': 'localeString', 'en': 'container scroll'}

属性

方向

手指移动所朝向的区域

过度滚动

你可以选择开启或关闭当用户滚动过远时出现的回弹效果

滚动

设置容器内的起始距离,从滚动或分页容器中的指定位置显示内容

方向

手指移动所朝向的区域

过度滚动

你可以选择开启或关闭当用户滚动过远时出现的回弹效果

滚动

设置容器内的起始距离,从滚动或分页容器中的指定位置显示内容

分页

分页是指容器会根据所选方向(水平或垂直)按与其高度或宽度等效的距离进行吸附。


{'_type': 'localeString', 'en': 'Paging'}


{'_type': 'localeString', 'en': 'Paging'}

属性

按 [Container] 分页

容器每次移动的距离相当于其自身的宽度

按 [Custom] 分页

你可以设置自定义分页宽度。例如,当容器内的图层有外边距时,这会很有用

方向

手指移动的方向

过度滚动

你可以选择开启或关闭当用户滚动过头时出现的回弹效果

滚动

设置容器内的起始距离,从滚动或分页容器中的指定位置开始显示内容

按 [Container] 分页

容器每次移动的距离相当于其自身的宽度

按 [Custom] 分页

你可以设置自定义分页宽度。例如,当容器内的图层有外边距时,这会很有用

方向

手指移动的方向

过度滚动

你可以选择开启或关闭当用户滚动过头时出现的回弹效果

滚动

设置容器内的起始距离,从滚动或分页容器中的指定位置开始显示内容

滚动与分页用例

了解如何在常见场景中高效利用滚动和分页。探索如何为移动端和桌面端应用创建垂直和水平滚动视图。掌握正确配置滚动属性的方法,并为与滚动相关的交互选择合适的触发器和响应。

亲自体验这些原型并下载它们,以便查看其交互效果。此外,浏览我们的教程,了解创建每个原型背后的分步流程。

在下方找到你需要的用例:

浏览社交媒体应用

就像如今大多数社交媒体应用的工作方式一样,你可以创建水平和垂直滚动来浏览不同的个人资料和照片。了解如何为滚动视图添加边距,以保持与你的应用类似的 UI(滚动末尾留有空白)。


{'_type': 'localeString', 'en': 'browsing through a social media app'}

亲自试用该原型

学习如何一步步创建此原型。

消息应用中的垂直滚动

在消息应用或电子邮件收件箱中上下滚动查看消息。创建一个滚动容器,并学习如何设置自定义的初始滚动位置(例如,从底部开始)。


{'_type': 'localeString', 'en': 'vertical scroll in a messaging app'}

亲自试用该原型

学习如何一步步创建此原型。

循环滚动轮播

就像在线购物网站或视频流媒体平台上的图片画廊一样,你可以创建幻灯片。了解如何使用 分页容器创建轮播视图,以及如何在滚动时使用变量交替图片名称。


{'_type': 'localeString', 'en': 'looping scroll carousel'}

亲自试用该原型

学习如何一步步创建此原型。

滚轮选择器

创建你自己的滚轮选择器来选择日期、时间等。滚轮选择器可让你非常快速地上下滚动浏览多个选项。它非常有用,尤其是在选项列表可能超出屏幕可用空间而无法完整显示时。


{'_type': 'localeString', 'en': 'wheel picker'}

亲自试用该原型

学习如何一步步创建此原型。

从中间开始滚动与分页

让你的页面从中间向左、向右两侧滚动。了解如何设置正确的容器属性来实现这一点。


{'_type': 'localeString', 'en': 'scroll paging from the middle'}

亲自试用该原型

学习如何一步步创建此原型。

无限分页滚动

让你的页面在两个方向上无限滚动。了解如何使用分页容器对页面进行分组,并使用范围触发器启用无限滚动。


{'_type': 'localeString', 'en': 'infinite paging scroll'}

亲自试用该原型

学习如何一步步创建此原型。