Axure：教你10步用动态面板实现移动端上下滚动屏幕

本文章主要是为需要的人提供教程以及为自我学习的一种复盘方式。

1.从元件库中拖入一个手机模板。

2.在导航栏和标签栏之间拖入一个动态面板，并将面板名称命名为：外层动态面板。

3.双击 【外层动态面板】，将state1改为：state1-外层动态面板，并双击进入  state1-外层动态面板里面

4.在【 state1外层动态面板】里，拖入一个动态面板，并命名为：内层动态面板。 内层动态面板的长度为所要展示的内容的长度。

5.同理，双击【内层动态面板】后，将state1命名为：state1-内层动态面板，并双击进入【state1-内层动态面板】里面。并拖入自己要展示的内容

6.返回至主页面，单击【外层动态面板】，给它添加“拖动时”用例

7.双击“拖动时”后，点击“移动”，要移动的元件选择【内层动态面板】，移动选为：垂直移动

8.点击“添加边界”，添加2个边界：（1）顶部<=0（2）顶部>=0。当顶部>=0时，需要为其添加函数，点击>=0时的 fx

9.设置变量，点击“添加局部变量”，panel1=元件 外层动态面板；panel2=元件 内层动态面板。panel1，panel2可按自己喜好命名

10.设置函数,设置函数为：[[panel1.height-panel2.height]]  。设置完成后，按f5预览，如果不能实现效果，请务必检查每一个变量名和函数（特别易错，我错了三次）。

注：本教程参考： 阿阿小兰兰  发布的（Axure之上下滑动屏幕实现，原文网址 https://www.jianshu.com/p/dd44f5229c32 。ps：阿阿小兰兰写得特别清楚，从她的教程中本人受益良多）

第一步：我们先打开我们的axure软件，点击新建，然后将我们的手机模型拖拽进我们的axure，点击我们的“动态面板”将其往编辑窗口拖拽。如下图

第二步：创建好我们的动态面板之后，按住“ctrl+c”将其复制下来，然后双击我们的“外层动态面板”下面的state1，然后按住“ctrl+v”将我们的“外层动态面板”复制下来

第三步：然后双击我们的“内层动态面板”下面的state1，然后点击“矩形”，并将其图案拖拽到我们的内层动态面板中，调整好位置，并给其填充颜色。

第四步：在拖进一个占位符，并调整其位置，如图所示。

第五步：然后点击我们导航栏上面的“外层”，并将我们的“内层”图案拖拽平移一段距离，如下图。

第六步：然后点击“矩形”，用来量我们“外层”和“内层”之间的距离，方便我们的侧边栏的移动。如下图。量出距离之后，即可将其删掉。

第七步：点击我们导航栏的“内层”，然后在我们选中我们刚才的“占位符”，然后点击我们的“鼠标单击时”选项，如下图。

第八步：进入我们的“单击鼠标时”之后，点击“移动”，勾选“内层”，然后在下面的“y”内输入我们刚才量出来的距离，即“-134”

第九步：点击上面的“添加条件”选项，选择“变量值”、“！=”“0”，然后点击确定。

第十步：再次重复第八和第九步骤，“y”值改为“134”，其他不变，然后点击上面的“添加条件”选项，选择“变量值”、“==”“0”，然后点击确定。

第十一步：然后再次点击我们的“case1”，找到并点击下面的“设置变量值”，勾选“变量”，然后将变量值设为“0”，点击确定，“case2”我们也重复此动作，只是在设置变量值时，不设为0即可。

最后，我们可以预览我们做出来的效果了，我们按住F5，或者点击上面的“预览”，进入网页之后，我们上下滚动鼠标即可看出我们的效果了。

---