微信小程序-仿微信朋友圈

自學(xué)小程序已有2個(gè)月,經(jīng)手的項(xiàng)目及demo也已經(jīng)讓我快速入門當(dāng)前最火熱的語言之一净薛,小程序確實(shí)有著移動APP不可比擬的優(yōu)勢汪榔,開發(fā)快,上線快罕拂,迭代也快......本篇簡書文章只為給大家講解思路及怎么處理揍异,有任何不當(dāng)之處全陨,歡迎大家指出1唷V灾馈!

GIF

結(jié)構(gòu)解析:

剖析圖

1柿菩、不管是拿到何種需求戚嗅,我們第一步驟不是直接擼起袖子就寫代碼,而是先把結(jié)構(gòu)弄清楚枢舶,把UI拆分成N多小模塊懦胞。

①????左邊left-view + 右邊right-view

列表里面先包一層view,再在該view的基礎(chǔ)上進(jìn)行布局凉泄,這樣子容易修改整體的背景啊或者進(jìn)行板塊的挪動

②????彈性盒子模型 flex

所有的內(nèi)容都以盒子模型為基礎(chǔ)進(jìn)行布局

③????圖片展示:可以判斷顯示躏尉,如果是一張圖,可以單獨(dú)顯示縮略圖后众。(建議所有小圖顯示加載縮略圖)

④ ? ?點(diǎn)贊+評論彈出框:點(diǎn)贊和評論彈出框只創(chuàng)建一個(gè)胀糜,每次修改其y值,距離右側(cè)值為固定值蒂誉,y值為點(diǎn)擊部位的top ?- 控件height/2

點(diǎn)擊時(shí)動畫控制寬度變化

⑤ ? ?點(diǎn)贊 + 評論:點(diǎn)贊和評論部分是一個(gè)view下面的兩個(gè)單獨(dú)的view教藻,之所以多層view是防止外部的布局影響內(nèi)部view上控件的布局效果

點(diǎn)贊:list橫向列表創(chuàng)建,float:left 靠右布局

評論:list縱向列表布局右锨,只能設(shè)置line-height括堤,不能設(shè)置height

鏈接:https://pan.baidu.com/s/1dPYb-OfaKJE8QXeCoyaxAA 密碼:b9k1

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市绍移,隨后出現(xiàn)的幾起案子悄窃,更是在濱河造成了極大的恐慌,老刑警劉巖蹂窖,帶你破解...
    沈念sama閱讀 206,311評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件广匙,死亡現(xiàn)場離奇詭異,居然都是意外死亡恼策,警方通過查閱死者的電腦和手機(jī)鸦致,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,339評論 2 382
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來涣楷,“玉大人分唾,你說我怎么就攤上這事∈ǘ罚” “怎么了绽乔?”我有些...
    開封第一講書人閱讀 152,671評論 0 342
  • 文/不壞的土叔 我叫張陵,是天一觀的道長碳褒。 經(jīng)常有香客問我折砸,道長看疗,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 55,252評論 1 279
  • 正文 為了忘掉前任睦授,我火速辦了婚禮两芳,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘去枷。我一直安慰自己怖辆,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,253評論 5 371
  • 文/花漫 我一把揭開白布删顶。 她就那樣靜靜地躺著竖螃,像睡著了一般。 火紅的嫁衣襯著肌膚如雪逗余。 梳的紋絲不亂的頭發(fā)上特咆,一...
    開封第一講書人閱讀 49,031評論 1 285
  • 那天,我揣著相機(jī)與錄音录粱,去河邊找鬼腻格。 笑死,一個(gè)胖子當(dāng)著我的面吹牛关摇,可吹牛的內(nèi)容都是我干的荒叶。 我是一名探鬼主播,決...
    沈念sama閱讀 38,340評論 3 399
  • 文/蒼蘭香墨 我猛地睜開眼输虱,長吁一口氣:“原來是場噩夢啊……” “哼些楣!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起宪睹,我...
    開封第一講書人閱讀 36,973評論 0 259
  • 序言:老撾萬榮一對情侶失蹤愁茁,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后亭病,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體鹅很,經(jīng)...
    沈念sama閱讀 43,466評論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 35,937評論 2 323
  • 正文 我和宋清朗相戀三年罪帖,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了促煮。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,039評論 1 333
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡整袁,死狀恐怖菠齿,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情坐昙,我是刑警寧澤绳匀,帶...
    沈念sama閱讀 33,701評論 4 323
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響疾棵,放射性物質(zhì)發(fā)生泄漏戈钢。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,254評論 3 307
  • 文/蒙蒙 一是尔、第九天 我趴在偏房一處隱蔽的房頂上張望殉了。 院中可真熱鬧,春花似錦嗜历、人聲如沸宣渗。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,259評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至田轧,卻和暖如春暴匠,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背傻粘。 一陣腳步聲響...
    開封第一講書人閱讀 31,485評論 1 262
  • 我被黑心中介騙來泰國打工每窖, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人弦悉。 一個(gè)月前我還...
    沈念sama閱讀 45,497評論 2 354
  • 正文 我出身青樓窒典,卻偏偏與公主長得像,于是被迫代替她去往敵國和親稽莉。 傳聞我的和親對象是個(gè)殘疾皇子瀑志,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,786評論 2 345

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

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 171,506評論 25 707
  • Brene Brown劈猪,常看TED一定會知道這個(gè)名字良拼,她曾演講的《脆弱的力量》讓太多人豁然開朗战得,是最受歡迎的五大T...
    ad13227af2a1閱讀 867評論 0 0
  • 「黛蛾長斂,任是春風(fēng)吹不展」出自宋朝秦觀的《減字木蘭花·天涯舊恨》庸推。這兩句的意思是:長眉總是緊鎖常侦。無論春風(fēng)怎么...
    九陵初見閱讀 293評論 0 0
  • 前天看了一部韓國的電影,名叫男人和女人贬媒。劇中男人有個(gè)女兒很小就有憂郁癥聋亡,女人有個(gè)兒子有自閉癥,均有家庭掖蛤,在愛爾蘭相...
    周五怎么了閱讀 278評論 0 0
  • 美國社會心理學(xué)家費(fèi)斯汀格(Festinger)有一個(gè)很出名的判斷杀捻,被人們稱為“費(fèi)斯汀格法則”: 生活中的10%是由...
    一枚冰兒閱讀 257評論 4 0