我们通常在耍手机的时候,都会向下滑动,查看内容,那么如何实现呢?
今天,我们练习一个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、预览效果。点击预览,在预览页面中,按住鼠标左键不放,就发现矩形框内的卡片可以上下拖动。完结,撒花!
点击预览
预览效果