编辑线索:我们经常会遇到产品中上下滑动的页面。比如我们预览页面时，需要上下滑动才能查看；这篇文章的作者分享了关于在移动页面上下滑动的Axure教程。我们一起来看看。

案例展示:https://ctm29p.axshare.com/

工具:Axure RP9

本文将介绍两种方法来达到上下滑动页面的效果(学习这两种方法就够了)。

01方法1:(超级方便)

这种方法的要点是利用“动态面板”的“滚动条”的垂直滚动功能，实现内容上下滑动的效果。

设计思路如下:

1.首先画出页面的基本结构

下图:基于(375*667)iPhone8的宽度和高度，上下有两个矩形(375*50)，中间有一个动态面板(375*567)。

2.设置动态面板(重点来了)

1)填写滚动预览的内容:双击【动态面板】进入状态1，然后填写里面的框，硬填，至少超过动态面板的高度。

2)实现内容滚动:关闭状态1，然后选择动态面板，右键单击滚动条，选择垂直滚动。

或者按如下所示操作:

点击“预览”，就会实现上下滑动的效果，好容易！但是你会发现右边有一个滚动条，很疯狂，影响美观。

3)隐藏滚动条:这里有两种方法

1.我们可以用一个长方形作为滚动条来覆盖它(魔高一尺，路高一尺，(~▽)/Xi Se)如下图:

2.(这样会比1好，不会遮挡边界内容)拓宽动态面板，让滚动条区域超出页面大小(即页面大小要先设置，比如我的情况是基于iPhone8的页面大小)
(这个方法来自评论区的小可爱，谢谢小可爱)

点击预览，完美。

02方法2:(滚动条没有问题)

这种方法比第一种方法略难理解，可以边操作边按照下面的步骤理解量。

方法在于动态面板2的内容会随着操作动态面板1的滚动而移动，并设置滑动限制。

设计思路如下:

来源:http://www.woshipm.com/rp/420885.html

1.首先画出页面的基本结构

和往常一样，先画一个模型，如下图:基于(375*667)iPhone8的宽度和高度，上下有两个矩形(375*50)，中间有一个动态面板1(375*567)，然后在动态面板1的状态1中添加一个动态面板2(375*567)。

2.渐进细节

1)填写动态面板2的状态1；用力填充内容，至少超过动态面板1的高度，然后就可以看到滑动效果了。

2)拖动动态面板1时，动态面板2随着垂直拖动而移动；选择【动态面板1】，点击【新建交互】，选择【拖动时】-【移动】，选择【动态面板2】，选择【跟随垂直拖动】，点击【完成】，如下图:

3)拖动动态面板1时，如果动态面板2没有接触到顶部矩形，则将动态面板2移回开始处的顶部。

选中【动态面板1】点��վ�������击【新建交互】选择【拖动结束时】点击【启用情形】；添加情形1：如果范围于 动态面板2 未接触 范围于 顶部矩形；在情形1下添加动作：【添加动作】-【移动】动态面板2 到达 (0,0) 点击“完成”；如下图设置：

4)拖动动态面板1时，如果动态面板2没有碰到底部矩形，则将动态面板2的末端移回底部；操作步骤与(3)基本相同。

在【拖动结束时】添加情形2：如果范围于 动态面板2 未接触 范围于 底部矩形；在情形2下添加动作：【添加动作】-【移动】动态面板2 到达 (0,-222) 点击“完成”；如下图设置：（tip：动态面板1的高 – 动态面板2的高 = -222）。

点击预览，完美。