猿型库：Axure小练习-微信朋友圈拖动刷新

相信大家每天都在刷微信的朋友圈，在微信朋友圈里面有个很常用的功能，就是向下拖动以后朋友圈的自动刷新，今天，我们就看看如何用Axure实现微信朋友圈的拖动自动刷新。

 

效果查看：http://www.axurestudy.cn/pr/index.html

【需求分析】

1、向下拖动屏幕的时候，当前朋友圈的内容要随着拖动而向下移动，这个时候刷新的图标要展示出来；

2、当拖动结束的时候，朋友圈的内容刷新，并且隐藏刷新的图标；

【设计思路】

1、拖动肯定用动态面板来实现，并且在拖动的时候，要设置拖动的边界，只能朝下拖动，不能朝左右上拖动；

2、对于朋友圈的内容，在这个案例里面我们使用中继器来实现，对于拖动以后内容的更新，我们这里采用变通的方式，即每次拖动刷新都会修改中继器的排序，这样看起来相当于朋友圈的内容发生了变化；

3、至于刷新的图标，这个就通过图形的显示或者隐藏来实现就可以了；

【原型设计】

1、先在画布区域拖入手机框，信号区域命名为top，内容区域命名为back这个比较简单不做赘述；

2、设置刷新图标、头像等微信朋友圈需要展示的内容；

3、拖入中继器，作为朋友圈显示的内容，中继器的每行都包括头像、名称、内容区域、图形区域、更多和更新时间，为了简化起见，只对内容区域和图形区域从中继器获取，其他区域作为固定内容，不发生变化；

 

4、中继器的数据源如下所示，其中order列是用于排序的；

 

5、朋友圈的头部以及内容区域的中继器转换为动态面板；

【交互设计】

1、通过中继器的每项加载事件，对朋友圈的数据进行初始化；

2、设置朋友圈的拖动事件，当拖动的时候，面板跟随移动并且显示刷新图标；

 

 

3、当拖动结束的时候，面板恢复初始状态，中继器添加排序，并且隐藏刷新图标；

 

4、到了这一步，朋友圈拖动刷新的原型就做好了，同学们赶紧去试试吧。

---

回复【入门】 ，获取零基础Axure快速入门视频教程；

回复【安装】 ，获取安装程序；

回复【练习】 ，获取练习案例；

回复【高保真】，获取高保真原型；

关注微信公众号【猿型库】，获取更多优质Axure资源