猿型庫:Axure小練習(xí)-微信朋友圈拖動(dòng)刷新

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

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末夸溶,一起剝皮案震驚了整個(gè)濱河市逸吵,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌缝裁,老刑警劉巖扫皱,帶你破解...
    沈念sama閱讀 222,729評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異,居然都是意外死亡韩脑,警方通過查閱死者的電腦和手機(jī)氢妈,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,226評論 3 399
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來段多,“玉大人首量,你說我怎么就攤上這事〗裕” “怎么了加缘?”我有些...
    開封第一講書人閱讀 169,461評論 0 362
  • 文/不壞的土叔 我叫張陵,是天一觀的道長琅捏。 經(jīng)常有香客問我生百,道長,這世上最難降的妖魔是什么柄延? 我笑而不...
    開封第一講書人閱讀 60,135評論 1 300
  • 正文 為了忘掉前任蚀浆,我火速辦了婚禮,結(jié)果婚禮上搜吧,老公的妹妹穿的比我還像新娘市俊。我一直安慰自己,他們只是感情好滤奈,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,130評論 6 398
  • 文/花漫 我一把揭開白布摆昧。 她就那樣靜靜地躺著,像睡著了一般蜒程。 火紅的嫁衣襯著肌膚如雪绅你。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,736評論 1 312
  • 那天昭躺,我揣著相機(jī)與錄音忌锯,去河邊找鬼。 笑死领炫,一個(gè)胖子當(dāng)著我的面吹牛偶垮,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播帝洪,決...
    沈念sama閱讀 41,179評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼似舵,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了葱峡?” 一聲冷哼從身側(cè)響起砚哗,我...
    開封第一講書人閱讀 40,124評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎砰奕,沒想到半個(gè)月后频祝,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體泌参,經(jīng)...
    沈念sama閱讀 46,657評論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,723評論 3 342
  • 正文 我和宋清朗相戀三年常空,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了沽一。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,872評論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡漓糙,死狀恐怖铣缠,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情昆禽,我是刑警寧澤蝗蛙,帶...
    沈念sama閱讀 36,533評論 5 351
  • 正文 年R本政府宣布,位于F島的核電站醉鳖,受9級特大地震影響捡硅,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜盗棵,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,213評論 3 336
  • 文/蒙蒙 一壮韭、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧纹因,春花似錦喷屋、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,700評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至惊畏,卻和暖如春恶耽,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背颜启。 一陣腳步聲響...
    開封第一講書人閱讀 33,819評論 1 274
  • 我被黑心中介騙來泰國打工偷俭, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人农曲。 一個(gè)月前我還...
    沈念sama閱讀 49,304評論 3 379
  • 正文 我出身青樓,卻偏偏與公主長得像驻债,于是被迫代替她去往敵國和親乳规。 傳聞我的和親對象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,876評論 2 361

推薦閱讀更多精彩內(nèi)容