第三步，开始交互

（１）第一大交互左右滑动或点击切换主页

参考《Axure：模拟豆瓣电影APP滑动点击切换主页》

首先设置向左拖动结束时的交互，如下图，以此类推设置向右拖动结束时的交互

设置两个灰色字体的点击事件的切换，先看即将上映灰字，交互和上面是一样的：

以此类推，设置正在热映灰字的交互，预览一下：（吐槽一下：GIF录制和压缩真的很费时间啊！我总要想办法让它不超过2M）

OK，第一大交互搞定了，但是上面没有顶部吸附效果，休息一下。

（２）第二大交互：两种状态下的菜单顶部吸附

变量scrollX和scrollY

首先讲一下变量scrollX和scrollY,就是 动态面板滚动的距离，也可以说，scrollX是动态面板滚动时元件的X坐标，scrollY是动态面板滚动时元件的Y坐标。首先要知道Axure的Y坐标相对于我们的视觉习惯是刚好相反的，因为它的Y坐标是越往下越大，如图：一开始坐标为（0，0）当你往上滚动100时，此时它的坐标为（0，100）；

让我们验证一下，插入一个矩形，设置当动态面板滚动时，显示scrollY的数值大小：

如果理解了，那我们开始做顶部吸附交互吧。

需要思考的问题

首先要知道，何时开始吸附，何时停止吸附，然后要知道怎么个吸附法

答案来了：

开始吸附就是当滚动的距离刚好到达菜单栏Y坐标的那一刻，结束吸附就是滚动距离没有达到菜单栏Y坐标；此时就要知道菜单栏的Y坐标,为125，那等于或超过125时，开始吸附，小于时则停止。

让菜单栏吸附就是让菜单永远处于最高的部位，而最高的部位刚好就是（0，scrollY）,记住在最顶部有一个隐形的Y坐标一直随着滚动而变化。停止吸附就是菜单栏回到它原来的地方。

case1：

case2：

快要大功告成了，但是还有两个问题：

1. 即将上映主页时间栏没有吸附，之前将它隐藏了，如果不隐藏，那么正在热映主页也会看到。
2. 仔细看上图，在吸附的同时切换主页，会发现吸附栏是透明的，因为菜单黑白两种颜色字体切换时是有逐渐这个动画的。

那要如何解决呢？

第一个问题这样：index载入时，隐藏它，当主页向左滑动结束时（包括点击即将上映灰字），将时间栏显示，向右滑动结束时（包括点击正在热映灰字），将时间栏隐藏。

第二个问题这样：加一个白色矩形置于吸附菜单栏和主页之间。

我错了，其实是把矩形插入到菜单栏组合，并放在最下面，OK,预览一下。

我发现学习一个工具的最好办法就是直接上手做，以点带面，即学即用，而不是想先系统学会这个工具再开始去做。

共勉！

本文由 @kevin 原创发布于人人都是产品经理。未经许可，禁止转载。

题图来自 Pexels，基于 CC0 协议