1.橫向水平布局:
實現水平布局,需要四個view容器元件,其中乙個是父容器。如下:
box1
box2
box3
給父容器以下樣式
1 /**index.wxss**/ 2 .content
其中display:flex將view設定為彈性布局,flex-direction: row;設定布局的方向是橫向水平布局。
在三個自容器view中,設定乙個高度,不設定寬度,將flex設定為1,意思是評分螢幕寬度,以便得到三個同等寬度。當然您也可以設定他的寬度,比如我設定如 下:
1 2 3 4 box1
5 box2
6 box3
7
效果就是每個寬度佔50px,同樣實現橫向水平布局。效果如下:
而當我將box1設定為固定寬度50px,而box2,box3不設定寬
度而直接設定flex:1,**如下:
1
2 3 box1
4 box2
5 box3
6
效果將會是box1佔了他該有的50px的寬度之後,剩下的整個螢幕的寬度由box2和box3平分。效果如下:
2.縱向垂直布局:
縱向布局實現跟橫向布局相似,但是需要把布局方式改為縱向列式的,假如需要將每個box的寬度設定為flex:1等自適應布局的話,需要給父容器乙個高度,否則子容器的高度只會顯示為剛好能包裹文字的告訴。當然您也可以設定每個box的高度。這裡我選擇自適應,所以給父容器乙個600px的高度,讓裡面的 三個box平分他的高度。**如下:
我們可以使用以上所述的方式實現更多靈活的布局。
微信小程式常用控制項彙總
image src images aaa.png image 2.文字標籤 text hello text 3.swiper滑動輪播 swiper catchtap onswipertap vertical indicator dots true autoplay true interval 500...
微信小程式 設定畫布字型
得將屬性設定寫在filltext的前面,否則不起作用 var context wx.createcanvascontext canvas context.setfontsize 10 設定字型大小 context.settextalign center 設定字型水平居中 context.settex...
微信小程式設定下拉重新整理
1 頁面json檔案中配置enablepulldownrefresh true enablepulldownrefresh true 2 頁面js檔案裡編寫函式 4 白色背景下可進行如下配置,否則三點閃爍重新整理看不到。backgroundtextstyle dark 5 下拉重新整理和scroll...