下载教程文件** ·····密码: ahgt**

选择对应名称的文件夹下载，内包含一个（开始）和一个（已完成）文件；（开始）文件用来和教程同步操作，（已完成）是最终结果。

Create horizontal paging carousels. 创建水平页面滚动。

Sometimes we want scrolling to be paginated, or in a carousel. We are going to build this Facebook Events prototype, with paginated scrolling, building upon what we've learnt in the Scrolling Views. Make sure you download the tutorial files to follow along.

有时候需要实现分页滚动或循环幻灯片。通过我们已经掌握的知识搭建这个Facebook Events 的原型，学会如何创建分页滚动原型。下载教程文件。

Setting up 配置

If you're starting from the tutorial files, you should see that we have our assets in place. We have five cards for our carousel, each the same width, and each the same distance from each other at 10 points. They are placed in a Group that is the width of all the cards in line, with the usual 10 points padding at the start and end.

打开标记为（开始）的文件。我们有五张尺寸相同的卡片放在需要横向滚动的组 H-Scroll 内，卡之间的相距 10。H-Scroll 的宽度是卡片和间距的总和，最左和最右卡外各有 10 的外边距。

Inspect each card to understand how the Anchor and Position properties affect placement. 检查每张卡了解锚定和位置属性如何影响位置。

Adding scroll 添加滚动

We add scroll like any other interaction — by hovering over the layer, clicking on Touch, and then clicking on a Scroll option. We want horizontal scrolling, so select Scroll X.

选择 H-Scroll 图层右上角 Touch 菜单中的 Scroll X 添加横向滚动交互。

What we end up with on the Patch Editor is a Scroll patch, connected directly to the X position of that layer — the H-Scroll Group.

编辑器出来了俩模块（下面图中那样）。

Scrolling the H-Scroll Group works fine, but it is set to Free scrolling. To make the Scroll Paging, we need to change the Scroll X input from Free to Paging.

可以横着滚动 H-Scroll 组，但是是自由滚动。要实现滚动分页，我们需要将 Scroll X 输入口的属性从Free 改为 Paging。

For any full-width paging scrolling, this would be fine. But because our cards are actually smaller than the width of the screen, we need to tell the Scroll exactly how big one of these cards, or pages, is.

对于单个卡片宽度等于页面的翻页滚动，这就算完成了。
但卡片宽度小于屏幕的宽度，所以我们需要告诉Scroll 模块这些卡或页面有多大的一个。

To give the Scroll settings, we need to add a Scroll Settings patch. Double-click on the Patch Editor Cmd Enter and type to find Scroll Settings. Press Enter.

添加一个 Scroll Setting 模块。

Connect the output of the Scroll Settings patch to the Settings input on the Scroll patch.

把 Scroll Settings 模块的输出口连接到 Scroll 模块的 Settings 接口。

There's a ton of settings here, and we don't usually need to use them all. Start by changing the Page Size input to have a width of 275 — the same as an individual card.

这里有很多项属性设置，但一般用不到那么多。首先设置页面宽度，把 Page Size W 的值改为275 - 单个卡片的宽度。

Change the Padding to a width of 10 — the same as the padding between each of the cards. We are not changing the height from 0 because vertical scrolling is not applicable in this prototype.

将 Page Padding W 改为10 - 卡之的间距。没有改变高度是因为，Scroll 只有水平滚动，改了垂直方向的也没有用啊。

Changing the Height properties of any of these inputs would not have an effect on our prototype. 变更高度在这里不会生效。

Now when we Scroll, our cards take up one swipe or scroll movement. The first and last are aligned to the sides, and the middle ones are centered.

现在再滚动，卡片是一张一张翻动的，会自动吸附一张卡位置。第一张左对齐，最后一张右对齐的，中间的居中对齐。

Android is a little more rigid than these animation inputs. We can change Rubber Band Tension to something like 440, and the Rubber Band Friction to 46.

Android 的动画会比 iOS 的更僵硬。可以将橡皮筋张力 Rubber Band Tension 改为 440，橡皮筋摩擦力 Rubber Band Friction 改为 46。

Scroll Settings uses iOS behavior by default. 默认值是以 iOS 的值为标准。

Clipping the scroll

Scrolling in Origami has the 'rubber banding' effect by default. This is what you see in many use cases of scrolling, and almost everywhere in iOS. This is an Android prototype however, so we do not want this over-drag at the start and end of the Scroll。

Origami 中的有 “橡皮筋” 效果。iOS系统中很常见。
但是，假设这是一个 Android 原型，不希望在滚动开始和结束时有橡皮筋效果。

We need to contain the Scroll to certain bounds — the Start X position and End X position. We need to use the Clip patch to contain values.

我们需要定义滚动的边界 - 起始 X 位置和结束 X 位置。我们需要使用 Clip 模块来定义值。

Double-click on the Patch Editor Cmd Enter and type to find Clip. Press Enter . We know our H-Scroll Position X start value is 0. Scrolling to the last card should show a value of -1075.

添加一个 Clip 模块到编辑器。已知 H-Scroll 图层的 X 起始位置为 0。滚动到最后一张卡片后显示的值为-1075。

The Position X at the last card. 滚到最后一张卡后的 X 位置。

Our Clip patch Max input should be 0, since that is the larger of the values. Our last card is, again, at -1075. Because that is a negative number and therefore less that 0, make -1075 the value of the Clip Min input.

因为-1075 是一个负数，小于0，所以 Clip 模块 Min 输入口值为-1075， Max 输入口值为 0。

The Clip patch with new values. Clip 模块的值。

Connect the Scroll X output to the Clip Value input. Then connect the output of the Clip to the input of the blue H-Scroll position Layer Property Patch.

连接 Scroll 模块的 X 输出口到 Clip 模块的 Value 输入口。然后连接 Clip 模块的输出口到蓝色的 H-Scroll 模块的输入口。

Connections between your patches should look similar to this. 连接成这样。

Once this is done, try scrolling once again. As soon as we get to the start and end of our H-Scroll Group, it becomes clipped within the two values.

再滚一滚，就能发现滚动到第一张和最后一张时的橡皮筋效果没有了。

相关教程

5. 滚动 Scrolling Views
滚动页面。

相关案例

5. Facebook New Stories
当新闻滚动一定距离时触发提示出现。

6. Facebook Popular Events

创建一个简单的水平滚动。

11. Messenger Home
滚动对话列表。

相关模块

Clip Scroll Scroll Settings

NEXT UP
7. 切换屏幕 Screen Transitions
创建屏幕切换流程。