小程序开发基础之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 封装示例