Axure 8.0手机页面拖动弹回效果

Axure RP8.0教程 手机页面的拖动和弹回效果 。

1. 用户向上拖动页面，页面向上滑动。

2. 用户向下拖动页面，页面向下滑动。

3. 当用户拖动页面到最底部时，页面弹回显示第一屏。

4. 当用户拖动页面到最顶部时页面弹回显示最后一屏。

步骤一.在部件库中拖入一个图片部件，双击打开浏览手机外壳图片，加入到工作区中，跳转这张手机外壳图的大小和位置。

步骤二在手机内部框中制作一个列表页面，页面，使用到的部件有图片部件、标签部件、水平线部件、将这些部件相互组合，设计一下样式还有调整一下大小和位置，制作成一个网页列表如下图所示

步骤三选择页面中列表页下面所有的部件，将他们转换成为一个动态面板，将这个动态面板的名称命名为拖动，将这个动态面板的名称命名为拖动，将这个拖动面板宽度大小为手机的内部宽度大小，高设置为手机内部高度减去列表页部件的高度大小。

步骤四点击进入到拖动面板的状态1页面中，按照一定的列表顺序继续制作这个页面的列表，使这个列表的高度远远超过拖动动态面板的高度，选择页面中所有的列表部件将他们转换成一个新的动态面板，为了区分将这个动态面板的名称命名为拖动2

步骤五现在我们来设置拖动2面板的交互动作，当我们拖动面板时，面板X轴是不变的只会改变Y轴的位置，所以我们在拖动2面板的动作交互，拖动动态面板时移动拖动2面板垂直轴拖动。

步骤六接下来我们需要设置两个矩形为动态面板拖动2设置一个参考，拖动两个矩形移动到到手机界面上一个矩形命名为顶部，调整位置到列表页下面，一个矩形下命名为底部，调整位置到手机底部内边框位置，将这矩形跳转一下层的顺序，设置到最底层。

步骤七我们返回到拖动面板的状态1页面，设置一下拖动2的，结束拖动动态面板时，的交互动作，在弹出的用例编辑器中，编辑一下条件当动态面板拖动2的部件范围未接触到顶部参考线时，移动拖动2面板到绝对位置（0,0）将拖动2面板弹回显示第一屏位置。

步骤八在设置，当结束拖动动态面板，第二个交互动作，当动态面板拖动2的部件范围未接触到底部参考线时拖动2面板到绝对位置（0，-1424）Y轴的位置计算方法为拖动面板的高度减去拖动2面板的高度将拖动2面板弹回显示最后一屏位置。