如何用Axure实现微信朋友圈的拖动自动刷新

微信朋友圈里面有个很常用的功能，就是向下拖动以后朋友圈的自动刷新，今天，我们就看看如何用Axure实现微信朋友圈的拖动自动刷新。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18154.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18154.html

效果查看：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18154.html

【需求分析】文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18154.html

1、向下拖动屏幕的时候，当前朋友圈的内容要随着拖动而向下移动，这个时候刷新的图标要展示出来；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18154.html

2、当拖动结束的时候，朋友圈的内容刷新，并且隐藏刷新的图标；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18154.html

【设计思路】文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18154.html

1、拖动肯定用动态面板来实现，并且在拖动的时候，要设置拖动的边界，只能朝下拖动，不能朝左右上拖动；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18154.html

2、对于朋友圈的内容，在这个案例里面我们使用中继器来实现，对于拖动以后内容的更新，我们这里采用变通的方式，即每次拖动刷新都会修改中继器的排序，这样看起来相当于朋友圈的内容发生了变化；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18154.html

3、至于刷新的图标，这个就通过图形的显示或者隐藏来实现就可以了；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18154.html

【原型设计】文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18154.html

1、先在画布区域拖入手机框，信号区域命名为top，内容区域命名为back这个比较简单不做赘述；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18154.html

2、设置刷新图标、头像等微信朋友圈需要展示的内容；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18154.html

3、拖入中继器，作为朋友圈显示的内容，中继器的每行都包括头像、名称、内容区域、图形区域、更多和更新时间，为了简化起见，只对内容区域和图形区域从中继器获取，其他区域作为固定内容，不发生变化；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18154.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18154.html

4、中继器的数据源如下所示，其中order列是用于排序的；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18154.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18154.html

5、朋友圈的头部以及内容区域的中继器转换为动态面板；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18154.html

【交互设计】文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18154.html

1、通过中继器的每项加载事件，对朋友圈的数据进行初始化；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18154.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18154.html

2、设置朋友圈的拖动事件，当拖动的时候，面板跟随移动并且显示刷新图标；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18154.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18154.html

3、当拖动结束的时候，面板恢复初始状态，中继器添加排序，并且隐藏刷新图标；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18154.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18154.html

4、到了这一步，朋友圈拖动刷新的原型就做好了，同学们赶紧去试试吧。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/18154.html