随着移动互联网的发展，手机已成为生活必不可少的一部分。我们的手机中安装了各种各样的app（应用程序），在使用app的过程中，上下滑屏与下拉刷新已是非常常见的交互操作，今天就来总结一下如何使用axure实现APP中上下滑动与下拉刷新的效果（PS：滑到最后可以看到最终效果哦^_^）。

一、元件准备

动态面板：两个，一个用来限定内容在手机中的显示区域（这里命名为：显示区域面板），一个用来滑动（这里命名为：滑动面板）；

热区：两个，分别命名为刷新、底部，其中刷新热区用来触发刷新操作，底部热区用来触发面板向上滑动超出范围时的弹回操作；

文本：分别命名为“正在刷新”与“下拉刷新”，表示刷新状态；

其他：手机壳（用来承载APP显示内容，以下简称为“手机”）、显示内容（APP页面需呈现的内容）等。

元件list及顺序如下图所示：

二、详细步骤

1.添加动态面板-在手机内容显示区域添加动态面板“显示区域面板”，动态面板大小与手机屏幕区域相同，这里“显示区域面板”的高为500；

2.嵌套动态面板-双击打开“显示区域面板”的state1(状态1)，并在里面添加动态面板“滑动面板”，注意“滑动面板”高度要大于等于“显示区域面板”高度，这里将“滑动面板”高度设置为800；

3.为动态面板添加内容-双击打开“滑动面板”的state1(状态1)，在里面添加所需展示的内容，这里仅简单添加了一些内容作为示意：填充面板背景色为灰色，并拖入了一些文本、按钮等，如下图所示：

此时“显示区域面板”的样式如下图所示：

4.添加与刷新相关的文本-在手机上层、“显示区域面板”下层（这里层级关系务必不能颠倒，为了保证层级关系正确，可以暂时将“显示区域面板”从手机中移走），添加用以提示刷新状态的文本，并分别命名为“正在刷新”与“下拉刷新 ”，如下图所示：

添加完成后，把“正在刷新”文本隐藏；

5.添加热区-在“下拉刷新”上方添加一个热区，命名为“刷新”，在手机屏幕底部添加一个热区，命名为“底部”，如下图所示：

热区与刷新相关文本添加完成后，即可将拖走的“显示区域面板”拖回至手机屏幕区域；

6.添加拖动时事件与用例-选中“显示区域面板”，为其添加ondrag（拖动时）事件，事件用例为：沿y轴移动“滑动面板”，并添加边界限制[顶部<=86,底部>=470]，事件用例设置如下图所示：

这里有三点需要注意：一是事件的主体是“显示区域面板”，而事件的动作主体是“滑动面板”，一定不要弄错啦！二是关于面板移动的边界限制，设置顶部小于等于86是为了限制面板最多可移动到“下拉刷新”文本下面，因为再往下移动也没什么意义了呀，同理设置底部大于等于470是为了限制面板向上移动的距离，因为不管向上移动多远，面板底部总是需要回归到屏幕底部，所以设置边界限制效果会更好一点；三有人可能会想86、470是如何计算出来的呢？这里结合下图详细解释一下：

由于坐标是以动态面板state(状态)中的区域所在位置为基准，不是以首页手机的位置为基准，而动态面板状态中区域坐标固定为（0,0）（如下图所示）,因此面板移动的顶部top边界坐标即为：108-50+14=72，这里为了使面板与“释放立即刷新”文字挨得不要太近，在72的基础上又增加了14，得到了现在的值86；同理，值470也可以计算出，就不再多说啦！

7.添加拖动结束时事件与用例-选中“显示区域面板”，为其添加ondragdrop（拖动结束时）事件，第一种情况case1：如果“滑动面板”没有接触到底部热区（由于用的是英文版axure，翻译不准确，见谅，意会就好哈），就将“滑动面板”移动到（0，-300）（这里-300为“滑动面板”高度减去“显示区域面板”高度），即：使“滑动面板”底部移动到手机屏幕的底部，具体设置如下图所示：

第二种情况case2：如果“滑动面板”没有接触到刷新热区，就将“滑动面板”移动至（0,50），即“正在刷新”文本的下面，同时显示“正在刷新”文本，等待1000ms后，将“正在刷新”文本修改为“刷新成功”；之后再等待500ms，将滑动面板移动到（0,0），即手机屏幕顶部；最后将“刷新成功”恢复至“正在刷新”，并隐藏“正在刷新”文本，这一步很重要哈，是为了可以重复实现下拉刷新效果。具体设置如下图所示：

三、效果展示

最终实现效果如下图所示：