Origami入门教程3:滚动与分页滚动
移动端页面我们经常会涉及到滚动,我们常见的滚动方式一种是自由滚动,一种是分页滚动。
自由滚动
自由滚动在Origami中还是比较容易做到的,只要给上层组添加一个Scroll交互Patch即可。注意,设置的ScrollY后,这个组就需要PositionY为0。我现在的项目是Group有个隐形的矩形所以从视觉上不是顶头。
带间距的组件:
不带间距的组件:
想要绕过这个限制也很简单,如果你的图层组不包含间距,那么在Origami中自己手动添加间距。
使用Layout设置滚动层的Padding和Spacing。这个比较像flex布局。
Spacing的意思是内部元素的横向或者纵向间距,类似于里面元素的margin。
Padding的意思是顶部、右侧、底部、左侧(与CSS顺序相同)间距,类似于外部组的间距。
分页滚动
分页滚动的话我们需要在Scroll的交互模块中入手,我们可以看到Scroll的ScrollY为Free,我们修改成Paging。
那么分页滚动的参数在哪里设置呢,就在下面的Settings。
有一个单独的Scroll Setting Patch。所以我们可以添加这个Patch连接到这里。
我们主要需要设置的是Page Size和Page Padding。
我们知道滚动一页的高度相当于一个卡片的高度加一个间距。所以我们可以把卡片高度参数导入进来。除了我们手动填写数值以外,我们还可以使用更加智能的Layer Info来实现这个功能。
选中组图层,然后创建Layer Info Patch。
我们将卡片的尺寸信息与滚动设置的大小相连即可。
我们还需要添加一个间距。因为如果你的卡片是包含了间距部分,就不需要设置。但是如果你的卡片之间是有空白的padding,那么就需要添加一个Page Padding了。
这里的PagePadding填写的就是滚动组Layout里的Spacing了。
- 感谢你赐予我前进的力量