2023年Axure高保真教程：鼠标滚动上下翻页效果

Axure高保真教程：鼠标滚动上下翻页效果鼠标滚动上下翻页效果是一种常见的网页交互设计，它使得用户可以通过鼠标滚轮的滚动来实现页面的上下翻页操作。这种效果通常应用于多图片、或长页面分页扫瞄的状况，使得用户可以便利地快速扫瞄内容，提高用户的交互体验。

今日就教大家如何在Axure中制作一鼠标滚动上下翻页的效果，我们会以鼠标滚动切换图片为案例。

一、效果展现

鼠标向上滚动时，切换查看上一张图片；

鼠标向下滚动时，切换查看下一张图片；

循环效果，假如在最终一张图片连续向下滚动，就会循环至第一张图片；假如在第一张图片连续向上滚动，就会循环值最终一张图片。

原型地址：/#g=1

二、制作教程

1.材料预备

这个模板我们主要用到中继器、图片元件、文本标签、矩形来制作。

1）图片的动态面板

我们先导入一张图片，导入后鼠标右键将图片转为动态面板，然后复制动态面板的状态，有几张图片就复制几个状态，在每个状态里一次打入对应的图片，这样图片的动态面板就完成了。

2）鼠标滚动的动态面板

由于我们要实现鼠标滚动的交互，一般的元件没有鼠标向上滚动和向下滚动的交互，所以我们要用动态面板来制作，只有动态面板有这个交互。

我们在动态面板里增加一个矩形，填充颜色为透亮     色，这样就不会遮挡与图片了。由于我们要做滚动的效果，所以动态面板里面的元件尺寸，肯定要比动态面板高，这样才会消失滚动条。所以我们把矩形的尺寸设置为19998，2万是axure的极限，反正就是拉到最长，这样可以让他有足够的滚动空间。

动态面板调出滚动条，高度和图片全都，这里会默认看到滚动条，案例中的滚动条是默认隐蔽的，所以我们需要用一个特别的操作来隐蔽，我们把动态面板宽拉大，直到滚动条在图片右侧，然后我们再次将动态面板转为动态面板，这样就多了一个外面板，外面板选择不显示滚动条，宽高和图片设置为一样，放在图片动态面板上方。这要就即可以有滚动效果，但是又不消失滚动条。

2.设置交互

1）向下滚动的交互

鼠标向下滚动时，按理来说，我们只需用设置面板状态的交互，就能将图片设置到下一个页面。

但是我们在这中间遇到了问题，这样写了之后会发觉，鼠标向下滚动，会有许多张图片切换，整个页面很乱。这里面的缘由是由于鼠标向下滚动是一个持续值，有些人滚动一下可能持续0.1秒，有些人滚动一下可能1秒，就是没有方法一瞬间完成这个操作，导致这途中触发了多次大事。

为了解决这个问题，我们就要做一个开关来掌握，我们用个隐蔽的文本标签就可以了，默认值为0，假如值为0的时候，就是可以滚动切换的状态，一开头切换的时候，我们就要把开关的值设为1，然后在用设置面板状态的交互，设置到下一页，这里需要增加向上滑动的动画，动画时间可以自己设置，案例中是1秒。然后等待1秒时间，这里等待时间和动画时间应当全都。我们在把开关的值设置为0，这样就相当于重新打开开关可以连续滚动切换图片。

2）向上滚动的交互

鼠标向上滚动是的思路和交互和上面对上滚动是的交互基本是全都的，唯一需要改的就是设置动态面板从下一项变成上一项，动画效果从向上滚动变成向下滚动。

然后我们会发觉有一个问题，就是一开开头进入，假如直接向上滚动时没有效果的，由于滚动条已经在顶部没方法向上滚动，只有先向下滚动后才能连续向上滚动。那假如一开头我们就想向上滚动该怎么办呢？由于设置了循环，理论上是可以向上滚动的。

这里我们要在动态面板内矩形上增加一个锚点，可以用透亮     的矩形去中，把锚点放在矩形中间的位置就是高10000点的位置，然后让滚动条默认滚动到中间锚点的位置，这样向上向下滚动都没有问题了。

3）动态面板载入时

前面讲到我们设置了中部锚点，要让滚动条默认滚动到中间锚点的位置。所以在载入时，我们要用滚动到锚点的交互，让滚动条滚动到中部的位置。这里也有一个问题，由于向下滚动的时候，就会触发向下滚动的交互，导致图片会不停滚动。

为了防止这种状况，我们可以默认把开关掌握值设置为1，这样图片就不会切换了，然后我们等待1毫秒，等待滚动到中部结束，然后用在开关掌握值设置为0，打开开关。

这样我们就制作完成了鼠标滚动上下翻页效果的原型模板了，下次使用时，只需要在动态面板里修改页面信息，替换图片，假如需要增加文字或者其