Axure 8 网页滚动效果+APP上下垂直拖动效果

1、实现带滚动条的网页滚动

【首页】添加一个【动态面板】,“左键单击”动态面板的State1,放入两个【文本段落】,以便查看滚动效果。


Axure 8 网页滚动效果+APP上下垂直拖动效果_第1张图片
图1


在【首页】的【动态面板】上“右键点击”选择【滚动条】,选择想要显示的方式

Axure 8 网页滚动效果+APP上下垂直拖动效果_第2张图片
图2

2、APP/网页制作不带滚动条的鼠标可拖动效果

添加一个【动态面板】,命名为【第一页】,大小要等于可滑动界面的首页大小区域,如500px*500px;

再添加一个【动态面板】,命名为【第二页】,长度要大于等于页面滑动后所全部要显示的内容 如500px*1500px;

(PS:“左键双击”打开第二页的State1,添加两个长度大于动态面板的矩形并上色,以便查看效果)

界面效果:

(注意线的显示,蓝色虚线是动态面板的区域范围)

Axure 8 网页滚动效果+APP上下垂直拖动效果_第3张图片
图3


Axure 8 网页滚动效果+APP上下垂直拖动效果_第4张图片
图4

右下角列表

Axure 8 网页滚动效果+APP上下垂直拖动效果_第5张图片
图5


"左键单击"【第一页】动态面板,查看右上角菜单的属性栏目,选择双击用例【拖动时】添加Case,选择【移动】,选择【第二页】动态面板,设置为垂直拖动。完成!

Axure 8 网页滚动效果+APP上下垂直拖动效果_第6张图片
图6

PS 还可设置拖动结束时动作

回到首页,在网页/APP顶部添加一个热区,命名1


Axure 8 网页滚动效果+APP上下垂直拖动效果_第7张图片
图7

选择用例【拖动结束时】,设置当顶部未接触热区时,回到固定位置。此方法还可设置点击某个按钮后,收起弹窗,如:点击键盘的【完成】或【下拉收起】按钮之后,收起键盘。

Axure 8 网页滚动效果+APP上下垂直拖动效果_第8张图片
图8
Axure 8 网页滚动效果+APP上下垂直拖动效果_第9张图片
图9

你可能感兴趣的:(Axure 8 网页滚动效果+APP上下垂直拖动效果)