axure页面左右滑动效果(axure页面上下滑动怎么做)

编辑导语：我们在产品中经常会遇到上下滑动的页面。比如我们预览页面的时候，需要上下滑动才能查看；笔者分享了Axure关于上下滑动移动页面的教程。让我们来看看。
案例：https://ctm29p.axshare.com/#id=1btojr
工具：Axure RP9
本文将介绍两种方法来实现页面上下滑动的效果(学会这两种方法就够了)。
01方法一：(超级方便)这种方法重点在于“动态面板”的“滚动条”的垂直滚动功能，达到上下滑动内容的效果。
设计思路如下：
1.先画出页面的基本结构如下：基于(375*667)iPhone8的宽度和高度，上下各2个矩形(375*50)，中间是一个动态面板(375*567)。
2.设置动态面板(这里是重点)1)填充滚动预览的内容：双击【动态面板】进入状态1，然后填充里面的方框，用力填充，至少填充到动态面板的高度。
2)实现内容滚动：关闭状态1，然后选择动态面板，右键滚动条，选择垂直滚动。
或者如下所示操作：
点击“预览”就会实现上下滑动的效果，好容易！但是你会发现右边有一个滚动条，很疯狂，影响美观。
3)隐藏滚动条：我们可以用一个长方形盖住这个滚动条(魔高一尺道高一丈，(~ ~魔高一丈~ ~ ~魔高一丈~ ~ ~魔高一丈~ ~ ~魔高一丈~魔高一丈~魔高一丈~魔高一丈~魔高一丈~魔高一丈~魔高一丈~魔高一丈~魔高一丈~魔高一丈~魔高一丈(魔高一丈，魔高一丈，魔高一丈，魔高一丈，魔高一丈，魔高一丈，魔高一丈，魔高一丈！
点击预览，完美。
02方法二：(滚动条没有问题)这种方法比方法一更难理解一点。操作时可以按照以下步骤了解金额。
这种方法是动态面板2的内容会随着动态面板1的滚动而移动，并设置滑动极限。
设计思路如下：
Gif来自：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)时，点击“完成”；设置如下：(提示：动态面板1的高度-动态面板2的高度=-222)。点击预览，完美。
我终于写完了o(9
本文由@人事匆匆原创发布。大家都是产品经理，未经作者允许，禁止转载。
题目来自Unsplash，基于CC0协议。