您好,登錄后才能下訂單哦!
這篇文章將為大家詳細(xì)講解有關(guān)微信小程序之容器組件view實(shí)現(xiàn)水平縱向布局的方法,小編覺得挺實(shí)用的,因此分享給大家做個參考,希望大家閱讀完這篇文章后可以有所收獲。
項(xiàng)目中最常用的兩種布局方式,水平布局和垂直布局,在微信小程序中實(shí)現(xiàn)起來也比較簡單。
1.橫向水平布局:
實(shí)現(xiàn)水平布局,需要四個view容器組件,其中一個是父容器。如下:
<!--index.wxml--> <view class="content"> <view style="flex:1;height:100px;background-color:green">box1</view> <view style="flex:1;height:100px;background-color:blue">box2</view> <view style="flex:1;height:100px;background-color:yellow">box3</view> </view>
給父容器以下樣式:
/**index.wxss**/ .content{ display: flex; flex-direction: row; }
其中display:flex將view設(shè)置為彈性布局,flex-direction: row;設(shè)置布局的方向是橫向水平布局。
在三個自容器view中,設(shè)置一個高度,不設(shè)置寬度,將flex設(shè)置為1,意思是評分屏幕寬度,以便得到三個同等寬度。當(dāng)然您也可以設(shè)置他的寬度,比如我設(shè)置如下:
<view class="content"> <view style="width:50px;height:100px;background-color:green">box1</view> <view style="width:50px;;height:100px;background-color:blue">box2</view> <view style="width:50px;;height:100px;background-color:yellow">box3</view> </view>
效果就是每個寬度占50px,同樣實(shí)現(xiàn)橫向水平布局。效果如下:
而當(dāng)我將box1設(shè)置為固定寬度50px,而box2,box3不設(shè)置寬
度而直接設(shè)置flex:1,代碼如下:
<!--index.wxml--> <view class="content"> <view style="width:50px;height:100px;background-color:green">box1</view> <view style="flex:1;height:100px;background-color:blue">box2</view> <view style="flex:1;height:100px;background-color:yellow">box3</view> </view>
效果將會是box1占了他該有的50px的寬度之后,剩下的整個屏幕的寬度由box2和box3平分。效果如下:
2.縱向垂直布局:
縱向布局實(shí)現(xiàn)跟橫向布局相似,但是需要把布局方式改為縱向列式的,假如需要將每個box的寬度設(shè)置為flex:1等自適應(yīng)布局的話,需要給父容器一個高度,否則子容器的高度只會顯示為剛好能包裹文字的告訴。當(dāng)然您也可以設(shè)置每個box的高度。這里我選擇自適應(yīng),所以給父容器一個600px的高度,讓里面的三個box平分他的高度。代碼
如下:
/**index.wxss**/ .content{ height: 600px; display: flex; flex-direction: column; }
<!--index.wxml--> <view class="content"> <view style="flex:1;width:100%;background-color:green">box1</view> <view style="flex:1;width:100%;background-color:blue">box2</view> <view style="flex:1;width:100%;background-color:yellow">box3</view> </view>
效果如下:
關(guān)于“微信小程序之容器組件view實(shí)現(xiàn)水平縱向布局的方法”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,使各位可以學(xué)到更多知識,如果覺得文章不錯,請把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。