相信大家每天都在刷微信的朋友圈秕豫，在微信朋友圈里面有個(gè)很常用的功能硕并，就是向下拖動(dòng)以后朋友圈的自動(dòng)刷新膊升，今天怎炊，我們就看看如何用Axure實(shí)現(xiàn)微信朋友圈的拖動(dòng)自動(dòng)刷新。
效果查看：http://www.axurestudy.cn/pr/index.html
【需求分析】
1、向下拖動(dòng)屏幕的時(shí)候评肆，當(dāng)前朋友圈的內(nèi)容要隨著拖動(dòng)而向下移動(dòng)债查，這個(gè)時(shí)候刷新的圖標(biāo)要展示出來；
2糟港、當(dāng)拖動(dòng)結(jié)束的時(shí)候攀操，朋友圈的內(nèi)容刷新，并且隱藏刷新的圖標(biāo)秸抚；
【設(shè)計(jì)思路】
1速和、拖動(dòng)肯定用動(dòng)態(tài)面板來實(shí)現(xiàn)，并且在拖動(dòng)的時(shí)候剥汤，要設(shè)置拖動(dòng)的邊界颠放，只能朝下拖動(dòng)，不能朝左右上拖動(dòng)吭敢；
2碰凶、對于朋友圈的內(nèi)容，在這個(gè)案例里面我們使用中繼器來實(shí)現(xiàn)鹿驼，對于拖動(dòng)以后內(nèi)容的更新欲低，我們這里采用變通的方式，即每次拖動(dòng)刷新都會(huì)修改中繼器的排序畜晰，這樣看起來相當(dāng)于朋友圈的內(nèi)容發(fā)生了變化砾莱；
3、至于刷新的圖標(biāo)凄鼻，這個(gè)就通過圖形的顯示或者隱藏來實(shí)現(xiàn)就可以了腊瑟；
【原型設(shè)計(jì)】
1、先在畫布區(qū)域拖入手機(jī)框块蚌，信號區(qū)域命名為top闰非，內(nèi)容區(qū)域命名為back這個(gè)比較簡單不做贅述；
2峭范、設(shè)置刷新圖標(biāo)财松、頭像等微信朋友圈需要展示的內(nèi)容；
3纱控、拖入中繼器游岳，作為朋友圈顯示的內(nèi)容，中繼器的每行都包括頭像其徙、名稱胚迫、內(nèi)容區(qū)域、圖形區(qū)域唾那、更多和更新時(shí)間访锻，為了簡化起見褪尝，只對內(nèi)容區(qū)域和圖形區(qū)域從中繼器獲取，其他區(qū)域作為固定內(nèi)容期犬，不發(fā)生變化河哑；
4、中繼器的數(shù)據(jù)源如下所示龟虎，其中order列是用于排序的璃谨；
5、朋友圈的頭部以及內(nèi)容區(qū)域的中繼器轉(zhuǎn)換為動(dòng)態(tài)面板鲤妥；
【交互設(shè)計(jì)】
1佳吞、通過中繼器的每項(xiàng)加載事件，對朋友圈的數(shù)據(jù)進(jìn)行初始化棉安；
2底扳、設(shè)置朋友圈的拖動(dòng)事件，當(dāng)拖動(dòng)的時(shí)候贡耽，面板跟隨移動(dòng)并且顯示刷新圖標(biāo)衷模；
3、當(dāng)拖動(dòng)結(jié)束的時(shí)候蒲赂，面板恢復(fù)初始狀態(tài)阱冶，中繼器添加排序，并且隱藏刷新圖標(biāo)滥嘴；
4熙揍、到了這一步，朋友圈拖動(dòng)刷新的原型就做好了氏涩，同學(xué)們趕緊去試試吧。
回復(fù)【入門】 有梆，獲取零基礎(chǔ)Axure快速入門視頻教程是尖；
回復(fù)【安裝】 ，獲取安裝程序泥耀；
回復(fù)【練習(xí)】 饺汹，獲取練習(xí)案例；
回復(fù)【高保真】痰催，獲取高保真原型兜辞；
關(guān)注微信公眾號【猿型庫】，獲取更多優(yōu)質(zhì)Axure資源
