长图拖动效果Axure&mockplus

实现目标：app中实现长图拖动，如拖到图的底部，则不能继续拖动，并将长图移动到底部；如拖到图的顶部，则不能继续拖动，并将长图移动到顶部。

1、Axure制作长图拖动

1、第一步：在首页添加动态面板，此动态面板用来存放长图，如命名为拖动面板

2、在首页设置拖动动态面板的效果，添加用例：ondrag（正在拖动时）-移动拖动面板-纵向拖动

3、设置动态面板结束拖动时的效果，添加用例：结束拖动时：如果y大于首页页面的顶部y，则将动态面板底部移动到首页顶部；如果y的绝对值+首页底部>动态面板长度时，则将动态面板顶部移动到这个值，一般这个y是个负数。移动效果设置为橡皮筋，如下图，运行后试一下。

有两点需要注意：1、动态面板显示层次，应该在app外框的下一级，不然容易遮盖住外观；2、y值得计算，需要注意；

可参考原文章：http://www.woshipm.com/rp/300339.html，原型网盘链接：https://pan.baidu.com/s/1borIg8Z（自己的网盘也有）

2、mockplus制作

墨刀自带了很多效果，给首页页面增加底部状态，在全局状态中展示长图全部，并增加上滑手势和下滑手势，在默认状态中将上滑手势连接到底部状态，在底部状态中将下滑手势连接到默认状态，底部状态页面显示为页面滑到底部的效果。运行后即可显示。