移动端页面我们经常会涉及到滚动,我们常见的滚动方式一种是自由滚动,一种是分页滚动。

自由滚动

自由滚动在Origami中还是比较容易做到的,只要给上层组添加一个Scroll交互Patch即可。注意,设置的ScrollY后,这个组就需要PositionY为0。我现在的项目是Group有个隐形的矩形所以从视觉上不是顶头。

添加scroll

带间距的组件:

带间距的组件

不带间距的组件:

不带间距

想要绕过这个限制也很简单,如果你的图层组不包含间距,那么在Origami中自己手动添加间距。

使用Layout设置滚动层的Padding和Spacing。这个比较像flex布局。

设置layout

Spacing的意思是内部元素的横向或者纵向间距,类似于里面元素的margin。

Padding的意思是顶部、右侧、底部、左侧(与CSS顺序相同)间距,类似于外部组的间距。

分页滚动

分页滚动的话我们需要在Scroll的交互模块中入手,我们可以看到Scroll的ScrollY为Free,我们修改成Paging。

分页滚动

那么分页滚动的参数在哪里设置呢,就在下面的Settings。

setting

有一个单独的Scroll Setting Patch。所以我们可以添加这个Patch连接到这里。

滚动设置

我们主要需要设置的是Page Size和Page Padding。

滚动设置

我们知道滚动一页的高度相当于一个卡片的高度加一个间距。所以我们可以把卡片高度参数导入进来。除了我们手动填写数值以外,我们还可以使用更加智能的Layer Info来实现这个功能。

选中组图层,然后创建Layer Info Patch。

图层信息

我们将卡片的尺寸信息与滚动设置的大小相连即可。

卡片相连

我们还需要添加一个间距。因为如果你的卡片是包含了间距部分,就不需要设置。但是如果你的卡片之间是有空白的padding,那么就需要添加一个Page Padding了。

不含间距图层的分页滚动

这里的PagePadding填写的就是滚动组Layout里的Spacing了。

间距