小程序開發基礎之view視圖容器

2019-11-19 13:12:17

字體：大中小

來源：轉載

供稿：網友

本文介紹了小程序開發基礎之view視圖容器，分享給大家，具體如下：

視圖容器

// wxml<view class="section"> <view class="section__title">flex-direction: row</view> <view class="flex-wrp_one">  <view class="flex-item bc_green">1</view>  <view class="flex-item bc_red">2</view>  <view class="flex-item bc_blue">3</view> </view></view>

// wxss.flex-wrp_one{ display: flex; flex-direction: row;}.flex-item{ width: 100px; height: 100px;}.bc_green{ background: green;}.bc_red{ background: red;}.bc_blue{ background: blue;}

圖片

// wxml<view class="section"> <view class="section__title">flex-direction: column</view> <view class="flex-wrp_two">  <view class="flex-item bc_green">1</view>  <view class="flex-item bc_red">2</view>  <view class="flex-item bc_blue">3</view> </view></view>

// wxss.flex-wrp_two{ display: flex; flex-direction: column;}.flex-item{ width: 100px; height: 100px;}.bc_green{ background: green;}.bc_red{ background: red;}.bc_blue{ background: blue;}

圖片

// wxml<view class="section"> <view class="section__title">justify-content: flex-start</view> <view class="flex-wrp_three">  <view class="flex-item bc_green">1</view>  <view class="flex-item bc_red">2</view>  <view class="flex-item bc_blue">3</view> </view></view>

// wxss .flex-wrp_three{ display: flex; justify-content: flex-start;}.flex-item{ width: 100px; height: 100px;}.bc_green{ background: green;}.bc_red{ background: red;}.bc_blue{ background: blue;}

view

// wxml<view class="section"> <view class="section__title">justify-content: flex-end</view> <view class="flex-wrp_four">  <view class="flex-item bc_green">1</view>  <view class="flex-item bc_red">2</view>  <view class="flex-item bc_blue">3</view> </view></view>

// wxss.flex-wrp_four{ display: flex; justify-content: flex-end;}.flex-item{ width: 100px; height: 100px;}.bc_green{ background: green;}.bc_red{ background: red;}.bc_blue{ background: blue;}

view

// wxml<view class="section"> <view class="section__title">justify-content: center</view> <view class="flex-wrp_five">  <view class="flex-item bc_green">1</view>  <view class="flex-item bc_red">2</view>  <view class="flex-item bc_blue">3</view> </view></view>

// wxss.flex-wrp_five{ display: flex; justify-content: center;}.flex-item{ width: 100px; height: 100px;}.bc_green{ background: green;}.bc_red{ background: red;}.bc_blue{ background: blue;}

view

// wxml<view class="section"> <view class="section__title">justify-content: space-between</view> <view class="flex-wrp_six">  <view class="flex-item bc_green">1</view>  <view class="flex-item bc_red">2</view>  <view class="flex-item bc_blue">3</view> </view></view>

// wxss.flex-wrp_six{ display: flex; justify-content: space-between;}.flex-item{ width: 100px; height: 100px;}.bc_green{ background: green;}.bc_red{ background: red;}.bc_blue{ background: blue;}

view

// wxml<view class="section"> <view class="section__title">justify-content: space-around</view> <view class="flex-wrp_seven">  <view class="flex-item bc_green">1</view>  <view class="flex-item bc_red">2</view>  <view class="flex-item bc_blue">3</view> </view></view>

// wxss.flex-wrp_seven{ display: flex; justify-content: space-around;}.flex-item{ width: 100px; height: 100px;}.bc_green{ background: green;}.bc_red{ background: red;}.bc_blue{ background: blue;}

view

// wxml<view class="section"> <view class="section__title">justify-content: space-evenly</view> <view class="flex-wrp_eight">  <view class="flex-item bc_green">1</view>  <view class="flex-item bc_red">2</view>  <view class="flex-item bc_blue">3</view> </view></view>

// wxss.flex-wrp_eight{ display: flex; justify-content: space-evenly;}.flex-item{ width: 100px; height: 100px;}.bc_green{ background: green;}.bc_red{ background: red;}.bc_blue{ background: blue;}

view

屬性

排列方式(flex-direction)	描述
row	橫向排列
column	縱向排列

項目內容對齊（justify-content）	描述
flex-start	向行頭緊挨
flex-end	向行尾緊挨
center	居中緊挨
space-between	平均分布
space-around	平均分布 ,兩邊留有一半間隔
space-evenly	兩邊間隔與中間相同

源碼

// wxml<view class="section"> <view class="section__title">flex-direction: row</view> <view class="flex-wrp_one">  <view class="flex-item bc_green">1</view>  <view class="flex-item bc_red">2</view>  <view class="flex-item bc_blue">3</view> </view></view><view class="section"> <view class="section__title">flex-direction: column</view> <view class="flex-wrp_two">  <view class="flex-item bc_green">1</view>  <view class="flex-item bc_red">2</view>  <view class="flex-item bc_blue">3</view> </view></view><view class="section"> <view class="section__title">justify-content: flex-start</view> <view class="flex-wrp_three">  <view class="flex-item bc_green">1</view>  <view class="flex-item bc_red">2</view>  <view class="flex-item bc_blue">3</view> </view></view><view class="section"> <view class="section__title">justify-content: flex-end</view> <view class="flex-wrp_four">  <view class="flex-item bc_green">1</view>  <view class="flex-item bc_red">2</view>  <view class="flex-item bc_blue">3</view> </view></view><view class="section"> <view class="section__title">justify-content: center</view> <view class="flex-wrp_five">  <view class="flex-item bc_green">1</view>  <view class="flex-item bc_red">2</view>  <view class="flex-item bc_blue">3</view> </view></view><view class="section"> <view class="section__title">justify-content: space-between</view> <view class="flex-wrp_six">  <view class="flex-item bc_green">1</view>  <view class="flex-item bc_red">2</view>  <view class="flex-item bc_blue">3</view> </view></view><view class="section"> <view class="section__title">justify-content: space-around</view> <view class="flex-wrp_seven">  <view class="flex-item bc_green">1</view>  <view class="flex-item bc_red">2</view>  <view class="flex-item bc_blue">3</view> </view></view><view class="section"> <view class="section__title">justify-content: space-evenly</view> <view class="flex-wrp_eight">  <view class="flex-item bc_green">1</view>  <view class="flex-item bc_red">2</view>  <view class="flex-item bc_blue">3</view> </view></view>

// wxss.flex-wrp_one{ display: flex; flex-direction: row;}.flex-wrp_two{ display: flex; flex-direction: column;}.flex-wrp_three{ display: flex; justify-content: flex-start;}.flex-wrp_four{ display: flex; justify-content: flex-end;}.flex-wrp_five{ display: flex; justify-content: center;}.flex-wrp_six{ display: flex; justify-content: space-between;}.flex-wrp_seven{ display: flex; justify-content: space-around;}.flex-wrp_eight{ display: flex; justify-content: space-evenly;}.flex-item{ width: 100px; height: 100px;}.bc_green{ background: green;}.bc_red{ background: red;}.bc_blue{ background: blue;}

開源github分享

Wechat_small_program_Share

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。

上一篇：javascript和php使用ajax通信傳遞JSON的實例

下一篇：詳解微信小程序的 request 封裝示例