第一种方法：使用内联框架部件制作可滚动内容。

第一步：双击【站点地图】面板中的page1，然后将准备好的图像素材img.png 拖放到设计区域，并调整图像坐标为（x:0，y:0），见图25。

（图25）

第二步：在【站点地图】中双击index，拖放一个内联框架部件到设计区域中任意位置，并将其宽度设置为与 page1中的img.png宽度相同，高度700像素。

第三步：双击【内联框架】部件，在弹出的【链接属性】对话框中选择page1，见图26。单击【确定】按钮关闭【链接属性】对话框。

（图26）

第四步：在顶部的工具栏中单击【预览】按钮，或者按下快捷键F5/Shift+Command+P，快速预览交互效果。

昆明网站建设笔者点评： 这种使用内联框架部件制作可滚动内容的局限性较大，如果只是简单展示可滚动内容，可以采用。

推荐指数： 

第二种方法：使用动态面板制作可滚动内容。

第一步：将准备好的图像素材img.png拖放到index页面的设计区域，单击右键，在弹出的关联菜单中选择【转换为动态面板】，给其命名为scrollable_content，设置该动态面板尺寸为【300×700】像素，然后右键单击该部件，在弹出的关联菜单中选择【滚动条＞按需显示垂直滚动条】，见图27。

（图27）

单击工具栏中的【预览】按钮，此时动态面板中的内容已经可以滚动了。但是，有些情况下，我们可能需要隐藏掉滚动条，使用动态面板的特性就可以轻松实现。

第二步：选中scrollable_content动态面板，按下快捷键Ctrl/Command+D，快速复制一份，给新复制的动态面板命名为scrollable_content_inside，然后右键单击该部件，在弹出的关联菜单中再次选择【转换为动态面板】，给转换后的动态面板命名为scrollable_content_outside，然后调整其宽度，将滚动条遮挡起来即可，见图28。

（图28）

昆明网站制作笔者点评： 这种使用动态面板部件制作可滚动内容的灵活性较强，如果只是简单展示可滚动内容，推荐采用。

推荐指数： 

第三种方法：使用动态面板制作可拖动内容。

拖放 img.png 到设计区域，单击右键，在弹出的关联菜单中选择【转换为动态面板】，给其命名为scrollable_content。选中该部件，在右侧部件【属性】面板中双击【拖动时】事件，在弹出的【用例编辑器】中新增【移动】动作，在右侧【配置动作】中勾选scrollable_content动态面板中的图像，并设置其移动为【垂直拖动】，见图29。单击【确定】按钮关闭【用例编辑器】。

（图29）

单击【预览】按钮，在浏览器中测试。此时动态面板中的图像已经可以垂直拖动了，但是我们遇到了案例15中的问题，内容可以滑出动态面板的范围。在Axure RP8中有两种方法可以解决这个问题，一种是我们在滑动解锁案例中使用的方法，另一种是使用Axure RP8新特性来实现，下面分别进行详细介绍。

使用边界约束（Axure RP8新特性）

第一步：双击scrollable_content动态面板，在弹出的【动态面板状态管理】对话框中双击State1，进入状态1，这里的蓝色边框范围就是动态面板的尺寸，见图30，超出这个范围的内容都不会显示。通过上下拖动img. png图像我们可以观察到，img.png图像向上拖动时，y坐标最大不能超过-1022像素，向下拖动y坐标最大不能超过0像素。也就是说，我们只需约束img.png图像的顶部坐标大于-1022并且小于0即可。

（图30）

第二步：选中scrollable_content动态面板，在右侧部件【属性】面板中双击【拖动时】事件下的【移动】动作，在弹出的【用例编辑器】右下角点击两次【添加边界】，并对顶部进行约束即可，见图31。单击【确定】按钮关闭【用例编辑器】。

第三步：如果你的操作没有错误，边界约束已经可以正常工作了，在顶部的工具栏中单击【预览】按钮，或者按下快捷键F5/Shift+Command+P，快速预览交互效果。

（图31）

使用条件约束

第一步：将 img.png图像拖放到设计区域，单击右键，在弹出的关联菜单中选择【转换为动态面板】，给其命名为scrollable_content，并设置其高度为700像素。

第二步：选中scrollable_content动态面板，在右侧部件【属性】面板中双击【拖动时】事件，在弹出的【用例编辑器】对话框中新增【移动】动作，在右侧的配置动作中勾选scrollable_content动态面板中的图像，并设置其移动为【垂直拖动】，见图32。单击【确定】按钮关闭【用例编辑器】。

第三步：选中scrollable_content动态面板，继续在右侧部件【属性】面板中单击【更多事件＞＞＞】，在下拉列表中选择【向上拖动结束时】，在弹出的【用例编辑器】顶部单击【添加条件】，在弹出的【条件编辑器】中，单击左侧的下拉列表并选择【值】，见图33-A。然后单击【fx】，见图33-B。在弹出的【编辑文本】对话框中单击【添加局部变量】，在中间的下拉列表中选择【部件】，右侧下拉列表中选择【图像】，如图34所示。继续单击【插入变量或函数…】，在下拉列表中选择局部变量 LVAR1，并将其修改为[[LVAR1.y]]，意思是【图像部件的y坐标】，见图35。

（图32）

（图33）

（图34）

（图35）

单击【确定】按钮关闭【编辑文本】对话框，在【条件编辑器】中进行如图36所示的设置，意思是“如果图像的y坐标小于-1022像素”，单击【确定】按钮关闭【条件编辑器】，现在条件编辑完毕，继续在【用例编辑器】中新增【移动】动作。在右侧【配置动作】中勾选【图像】，设置其移动为【绝对】，坐标（x:0，y:-1022），动画【摇摆】，时间【200】毫秒，见图37。

意思是，如果图像部件的y坐标小于-1022像素，就将其移动到绝对位置（0，-1022）。

（图36）

（图37）

第四步：同样的原理，当向下拖动时，如果图像部件的y坐标大于0，就移动图像部件到绝对位置（0，0），如图38。单击【确定】按钮关闭【用例编辑器】。

（图38）

第五步：至此，使用条件约束的上下滑动交互就制作完毕了。在顶部的工具栏中单击【预览】按钮，或者按下快捷键F5/Shift+Command+P，快速预览交互效果。

笔者点评： 在制作高保真原型时都会使用到这种方法，比如下拉刷新交互效果。其优点是灵活、保真度高，但需要扎实的基础知识。

推荐指数：