案例展示：https://ctm29p.axshare.com/#id=1btojr
工具：Axure RP9
本文章会先容2种实现页面高下滑动效果的方法（学会这两种方法就够用了）。
01 方法一：（超级便捷）
这个方法重点是利用了“动态面板”的“滚动条”垂直滚动的功能是实现内容高下滑动的效果。
设计思路如下：
1. 先画出页面基本构造
如下图：基于（375667）iPhone8的宽高，顶部和底部2个矩形（37550），中间1个动态面板（375567）。
2. 对动态面板进行设置（重点来了）
1）添补滚动预览的内容：双击【动态面板】，进入state1，然后再里面那个框框里填东西，使劲填，至少要填超过动态面板的高度。
2）实现内容滚动：关闭state1，然后选中【动态面板】右击选中【滚动条】选择【垂直滚动】。
或者如下图操作：
点击“预览”，高下滑动的效果就实现了，so easy！
但是你会创造中有一条滚动条在右边好抓狂，影响都雅。
3）隐蔽滚动条：我们可以用一个矩形这个滚动条给遮挡起来（魔高一尺道高一丈，(￣▽￣)／嘚瑟）如下图：
点击预览，完美。
02 方法二：（没有滚动条的烦恼）
这个方法比方法一轻微难明得一丢丢，可以随着下面的操作步骤一边操作一边理解额。
这个方法是在于对动态面板2的内容会跟随操作动态面板1的滚动而移动，并对滑动界线设置。
设计思路如下：
gif动态来源于：http://www.woshipm.com/rp/420885.html
1. 先画出页面基本构造
一如既往先画个模型，如下图：基于（375667）iPhone8的宽高，顶部和底部2个矩形（37550），中间1个动态面板1（375567），再在动态面板1的state1中添加一个动态面板2（375567）。
2. 渐进明细
1）在动态面板2的state1中添补内容；使劲添补内容，至少要填超过动态面板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）。点击预览，完美。
终于写完了o(╥﹏╥)o，希望也能帮到有缘的你们额。
本文由 @人事匆匆 原创发布于大家都是产品经理，未经作者容许，禁止转载。
题图来自Unsplash，基于CC0协议。
