相信大家每天都在刷微信的朋友圈秕豫,在微信朋友圈里面有個(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資源