Axure练习-拖动页面

演示

实现

画界面

外面这个手机原型不是重点，用组件库拖一个就行，重点是在屏幕可视范围内，创建一个动态面板，因为只有动态面板才有拖动的交互，这个模拟手指滑动就是依靠拖动交互实现的。然后在动态面板里放一个矩形，里面加上文字（足够长即可）。

添加交互

添加拖动

拖动 交互添加在动态面板上，意思是拖动动态面板时触发矩形（内容）的移动，移动距离等于拖动的y轴距离。

添加回退

仅仅是有拖动还不够，因为这样可以一直拖动下去，导致内容超出边界，所以需要加入回退逻辑。在可视区域的顶部和底部添加热区，这两个热区就作为边界，分别命名为hsp_top、hsp_bottom。

然后为动态面板添加交互。意思就是当内容和上面这个热区没有接触时，说明往下滑过头了，就需要回退到“下滑的边界”，同理对于往上滑也是一样，和底部的热区没有接触时，说明往上滑过头了，这就需要回退到“上滑的边界”。

至此，该功能已实现完毕。