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、预览效果。点击预览,在预览页面中,按住鼠标左键不放,就发现矩形框内的卡片可以上下拖动。完结,撒花!


点击预览
预览效果
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容