自學(xué)小程序已有2個(gè)月,經(jīng)手的項(xiàng)目及demo也已經(jīng)讓我快速入門當(dāng)前最火熱的語言之一净薛,小程序確實(shí)有著移動APP不可比擬的優(yōu)勢汪榔,開發(fā)快,上線快罕拂,迭代也快......本篇簡書文章只為給大家講解思路及怎么處理揍异,有任何不當(dāng)之處全陨,歡迎大家指出1唷V灾馈!
結(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)贊 + 評論:點(diǎn)贊和評論部分是一個(gè)view下面的兩個(gè)單獨(dú)的view教藻,之所以多層view是防止外部的布局影響內(nèi)部view上控件的布局效果
點(diǎn)贊:list橫向列表創(chuàng)建,float:left 靠右布局
評論:list縱向列表布局右锨,只能設(shè)置line-height括堤,不能設(shè)置height