自學小程式已有2個月,經手的專案及demo也已經讓我快速入門當前最火熱的語言之一,小程式確實有著移動APP不可比擬的優勢,開發快,上線快,迭代也快......本篇簡書文章只為給大家講解思路及怎麼處理,有任何不當之處,歡迎大家指出!!!
結構解析:
剖析圖 1、不管是拿到何種需求,我們第一步驟不是直接擼起袖子就寫程式碼,而是先把結構弄清楚,把UI拆分成N多小模組。
① 左邊left-view + 右邊right-view
列表裡面先包一層view,再在該view的基礎上進行佈局,這樣子容易修改整體的背景啊或者進行板塊的挪動
② 彈性盒子模型 flex
所有的內容都以盒子模型為基礎進行佈局
③ 圖片展示:可以判斷顯示,如果是一張圖,可以單獨顯示縮圖。(建議所有小圖顯示載入縮圖)
④ 點贊+評論彈出框:點贊和評論彈出框只建立一個,每次修改其y值,距離右側值為固定值,y值為點選部位的top - 控制元件height/2
點選時動畫控制寬度變化 ⑤ 點贊 + 評論:點贊和評論部分是一個view下面的兩個單獨的view,之所以多層view是防止外部的佈局影響內部view上控制元件的佈局效果
點贊:list橫向列表建立,float:left 靠右佈局
評論:list縱向列表佈局,只能設定line-height,不能設定height