Pull-Refresh［下拉式刷新］与之前的 Drawer Menu［抽屉式菜单］一样，都是目前移动应用中比较流行的交互设计。Pull-Refresh 最早出现在 Tweetie 中，后来这款应用被 Twitter 收购，随后被注册成了专利。当然这个只是防御性质，否则 Pull-Refresh 也不会像现在这样四处开花了。这次的实例就要利用 Axure 新增的 OnDrag 事件来模拟这种效果。
预览 | 下载
要求：
1、向下拉动屏幕出现［可刷新］的提示。
2、刷新要有加载过程。
3、刷新完成后屏幕归位。
拖入一个与手机模型屏幕同尺寸的 Dynamic Panel，命名为［mask］，其主要的作用是作为后续所有元素的容器，因为要把操作的可视范围限定在屏幕的空间内。
在［mask］中拖入一个稍高于屏幕尺寸的 Dynamic Panel，命名为［screen］，高出的部分是用于存放下拉时出现的刷新提示，高度自定，这里我设了 50px，同时将［screen］的位置坐标调整为 x0,y-50，目的是将刷新提示放置在可视范围之外。
在［screen］中拖入一个与屏幕同尺寸的 Dynamic Panel，命名为［content］，添加两个 State，分别命名为［content-1］［content-2］，用于存放刷新前和刷新后的内容，同时把底色调为白色之外的任意色，目的是与刷新区域做一个区别。
在［screen］中再拖入一个与屏幕同宽，高为 50px 的 Dynamic Panel，命名为［refresh］，添加两个 State，分别命名为［drag］［drag drop］，用来存放刷新前和加载时的不同状态提示。
为［mask］添加 OnDrag 事件，并设置动作 Move Panel，拖动方式为 with drag y，即只能沿纵轴方向移动。
为［mask］添加 OnDragDrop 事件，并设置动作：
1. Set Panel state to State，将［refresh］的 State 改为［drag drop］，实现加载提示。
2. Wait Time，为加载过程设置一个延迟时间，比如 1000ms。
3. Set Panel state to State，将［content］的 State 改为［content-2］，实现刷新后的效果。
好了，现在下拉刷新的效果已经可以实现了，但刷新后如何让被下拉的屏幕归位呢？这里就需要用到一个小技巧了。
拖入一个与屏幕同宽，高为 50px 的 Image Map Region 放置在屏幕的上方，命名为［header］保持它的下边缘与［mask］的上边缘有 2px～3px 的交集，用于判断［mask］的拖动位置，从而让其自动归位。由于 Image Map Region 只是一个图片热点，所以在预览时是不会被看到的。
然后在［mask］的 OnDragDrop 事件中添加一个触发条件，用于判断［mask］的 area of widget 是否超出了［header］的范围。
在条件下设置动作：
1. Wait Time，由于之前的加载过程需要 1000ms，所以这里也要设置一个相同的延迟时间用以归位。
2. Move Panel，让［mask］在加载结束后沿纵轴方向移动 ?50px，即将高为 50px 的刷新区域再移动至可视范围之外，实现自动归位的效果。
3. Set Panel state to State，最后将［refresh］的 State 再改回［drag］，以便于再次刷新时的文案的正确。
全部完成后的事件列表如下：
搞定，需要注意的是动作的设置要遵从应有的顺序，否则就出乱子了。
