Axure RP 9 动态面板——手机屏幕

我们通常在耍手机的时候，都会向下滑动，查看内容，那么如何实现呢？

今天，我们练习一个App屏幕向下滑动，查看内容的案例。

1、打开Axure RP 9 ，选择“新建”

2、在元件库选择“动态面板”，拖动到编辑区，将宽和长设置为375 X 667，如下图：

拖动动态面板

3、选中该动态面板，将名称设置为“手机屏幕”

设置名称“手机屏幕”

4、双击动态面板，切换元件库，将“卡片”元件拖入面板，拖动三个“卡片”元件，竖直排列，先ctrl+a全选，再ctrl+g 组合。选中该组合，将组合名称命名为“内容”，点击“关闭”。

如下图：

组合

5、切换元件库，将一个矩形拖入，对齐动态面板的左上角。

拖入矩形

6、将矩形的宽长设置为375 X 667，再点击“底层”，将矩形设置在底层。

设置底层

7、选中该动态面板，点击“新建交互”。

新建交互

8、选择“拖动时”，再选择“移动”，选择“内容”即选择前面我们创建的组合。

选择“拖动时”

选择“移动”

选择“内容”

9、因为我们是上下滑动，所以设置“跟随垂直移动”。

设置“跟随垂直移动”

10、点击“更多选项”，点击“添加界限”。“顶部>=0”，再一次添加界限，“底部<0”，点击完成。

点击“更多选项”

添加界限

设置界限

11、预览效果。点击预览，在预览页面中，按住鼠标左键不放，就发现矩形框内的卡片可以上下拖动。完结，撒花！

点击预览

预览效果