欧美三级国产三级日韩三级_亚洲熟妇丰满大屁股熟妇_欧美亚洲成人一区二区三区_国产精品久久久久久模特

微信小程序設(shè)置控件權(quán)重 - 新聞資訊 - 云南小程序開發(fā)|云南軟件開發(fā)|云南網(wǎng)站建設(shè)-昆明葵宇信息科技有限公司

159-8711-8523

云南網(wǎng)建設(shè)/小程序開發(fā)/軟件開發(fā)

知識

不管是網(wǎng)站，軟件還是小程序，都要直接或間接能為您產(chǎn)生價值，我們在追求其視覺表現(xiàn)的同時，更側(cè)重于功能的便捷，營銷的便利，運營的高效，讓網(wǎng)站成為營銷工具，讓軟件能切實提升企業(yè)內(nèi)部管理水平和效率。優(yōu)秀的程序為后期升級提供便捷的支持！

您當(dāng)前位置>首頁 » 新聞資訊 » 小程序相關(guān) >

微信小程序設(shè)置控件權(quán)重

發(fā)表時間：2021-3-31

發(fā)布人：葵宇科技

瀏覽次數(shù)：79

項目中最常用的兩種布局方式，水平布局和垂直布局，在微信小程序中實現(xiàn)起來也比較簡單。

1.橫向水平布局：

實現(xiàn)水平布局，需要四個view容器組件，其中一個是父容器。如下：

  
class="content">  
  "flex:1;height:100px;background-color:green">box1  
  "flex:1;height:100px;background-color:blue">box2  
  "flex:1;height:100px;background-color:yellow">box3

給父容器以下樣式

1 /**index.wxss**/  
2 .content{  
3   display: flex;  
4   flex-direction: row;  
5 }

其中display:flex將view設(shè)置為彈性布局，flex-direction: row;設(shè)置布局的方向是橫向水平布局。

在三個自容器view中，設(shè)置一個高度，不設(shè)置寬度，將flex設(shè)置為1，意思是評分屏幕寬度，以便得到三個同等寬度。當(dāng)然您也可以設(shè)置他的寬度，比如我設(shè)置如下：

1       
2 
3 class="content">  
4   "width:50px;height:100px;background-color:green">box1  
5   "width:50px;;height:100px;background-color:blue">box2  
6   "width:50px;;height:100px;background-color:yellow">box3  
7

效果就是每個寬度占50px,同樣實現(xiàn)橫向水平布局。效果如下：

而當(dāng)我將box1設(shè)置為固定寬度50px，而box2,box3不設(shè)置寬

度而直接設(shè)置flex:1，代碼如下：

1   
2 class="content">  
3   "width:50px;height:100px;background-color:green">box1  
4   "flex:1;height:100px;background-color:blue">box2  
5   "flex:1;height:100px;background-color:yellow">box3  
6

效果將會是box1占了他該有的50px的寬度之后，剩下的整個屏幕的寬度由box2和box3平分。效果如下：

2.縱向垂直布局：

縱向布局實現(xiàn)跟橫向布局相似，但是需要把布局方式改為縱向列式的，假如需要將每個box的寬度設(shè)置為flex:1等自適應(yīng)布局的話，需要給父容器一個高度，否則子容器的高度只會顯示為剛好能包裹文字的告訴。當(dāng)然您也可以設(shè)置每個box的高度。這里我選擇自適應(yīng)，所以給父容器一個600px的高度，讓里面的三個box平分他的高度。代碼如下：

1 /**index.wxss**/  
2 .content{  
3   height: 600px;  
4   display: flex;  
5   flex-direction: column;  
6 }

1   
2 class="content">  
3   "flex:1;width:100%;background-color:green">box1  
4   "flex:1;width:100%;background-color:blue">box2  
5   "flex:1;width:100%;background-color:yellow">box3  
6