自學(xué)小程序已有2個月，經(jīng)手的項(xiàng)目及demo也已經(jīng)讓我快速入門當(dāng)前最火熱的語言之一，小程序確實(shí)有著移動APP不可比擬的優(yōu)勢，開發(fā)快，上線快，迭代也快......本篇簡書文章只為給大家講解思路及怎么處理，有任何不當(dāng)之處，歡迎大家指出?。?！

結(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)建一個，每次修改其y值，距離右側(cè)值為固定值，y值為點(diǎn)擊部位的top  - 控件height/2

點(diǎn)擊時動畫控制寬度變化 
⑤    點(diǎn)贊 + 評論：點(diǎn)贊和評論部分是一個view下面的兩個單獨(dú)的view，之所以多層view是防止外部的布局影響內(nèi)部view上控件的布局效果

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

評論：list縱向列表布局，只能設(shè)置line-height，不能設(shè)置height