微信小程序组件解读和分析：一、view（视图容器 ）
view组件说明:
视图容器
跟HTML代码中的DIV一样，可以包裹其他的组件，也可以被包裹在其他的组件内部。用起来比较自由随意，没有固定的结构。
view组件的用法：
示例项目的wxml代码：
[XML] 纯文本查看 复制代码
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
<view class="btnGroup">
<view class="item orange" >退格</view>
<view class="item orange" >清屏</view>
<view class="item orange" >+/-</view>
<view class="item orange" >+</view>
</view>
<view class="btnGroup">
<view class="item blue" >9</view>
<view class="item blue" >8</view>
<view class="item blue" >7</view>
<view class="item orange" >-</view>
</view>
<view class="btnGroup">
<view class="item blue" >6</view>
<view class="item blue" >5</view>
<view class="item blue" >4</view>
<view class="item orange" >×</view>
</view>
<view class="btnGroup">
<view class="item blue" >3</view>
<view class="item blue" >2</view>
<view class="item blue" >1</view>
<view class="item orange" >÷</view>
</view>
<view class="btnGroup">
<view class="item blue" >0</view>
<view class="item blue" >.</view>
<view class="item blue" >历史</view>
<view class="item orange" >=</view>
</view>
|
示例项目的WXSS代码：
[CSS] 纯文本查看 复制代码
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
|
.btnGroup{ display:flex;
flex-direction:row;
}.orange{ color: #fef4e9;
border: solid 1px #da7c0c;
background: #f78d1d;
}.blue{
color: #d9eef7;
border: solid 1px #0076a3;
background: #0095cd;
} |
视图样式flex-direction: row的效果图：
WXML代码如下
[XML] 纯文本查看 复制代码
|
1
2
3
4
5
|
<view class="flex-wrp">
<view class="flex-item red" ></view>
<view class="flex-item green" ></view>
<view class="flex-item blue" ></view>
</view>
|
WXSS代码如下：
[CSS] 纯文本查看 复制代码
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
|
.flex-wrp{ height: 100px;
display:flex;
background-color: #FFFFFF;
}.flex-item{ width: 100px;
height: 100px;
}.red{
background: red;
}.green{
background: green;
}.blue{
background: blue;
} |
视图样式flex-direction: column的效果图：
WXML代码如下：
[XML] 纯文本查看 复制代码
|
1
2
3
4
5
|
<view class="flex-wrp column">
<view class="flex-item" style="background: red"></view>
<view class="flex-item" style="background: green"></view>
<view class="flex-item" style="background: blue"></view>
</view>
|
WXSS代码如下：
[CSS] 纯文本查看 复制代码
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
|
.column{ flex-direction:column;
}.flex-item{ width: 100px;
height: 100px;
}.flex-wrp{ height: 100px;
display:flex;
background-color: #FFFFFF;
}.red{
background: red;
}.green{
background: green;
}.blue{
background: blue;
} |
视图样式justify-content: flex-start的效果图：
WXML代码如下：
[XML] 纯文本查看 复制代码
|
1
2
3
4
5
|
<view class="flex-wrp flex-start">
<view class="flex-item" style="background: red"></view>
<view class="flex-item" style="background: green"></view>
<view class="flex-item" style="background: blue"></view>
</view>
|
WXSS代码如下：
[CSS] 纯文本查看 复制代码
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
|
.flex-start{ flex-direction:row;
justify-content: flex-start;
}.flex-wrp{ height: 100px;
display:flex;
background-color: #FFFFFF;
}.flex-item{ width: 100px;
height: 100px;
}.red{
background: red;
}.green{
background: green;
}.blue{
background: blue;
} |
视图样式justify-content: flex-end的效果图：
WXML代码如下：
[XML] 纯文本查看 复制代码
|
1
2
3
4
5
|
<view class="flex-wrp flex-end">
<view class="flex-item" style="background: red"></view>
<view class="flex-item" style="background: green"></view>
<view class="flex-item" style="background: blue"></view>
</view>
|
WXSS代码如下：
[CSS] 纯文本查看 复制代码
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
|
.flex-end{ flex-direction:row;
justify-content: flex-end;
}.flex-wrp{ height: 100px;
display:flex;
background-color: #FFFFFF;
}.flex-item{ width: 100px;
height: 100px;
}.red{
background: red;
}.green{
background: green;
}.blue{
background: blue;
} |
视图样式justify-content: center的效果图：
WXML代码如下：
[XML] 纯文本查看 复制代码
|
1
2
3
4
5
|
<view class="flex-wrp justify-content-center">
<view class="flex-item" style="background: red"></view>
<view class="flex-item" style="background: green"></view>
<view class="flex-item" style="background: blue"></view>
</view>
|
WXSS代码如下：
[CSS] 纯文本查看 复制代码
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
|
.justify-content-center{
flex-direction:row;
justify-content: center;
}.flex-wrp{ height: 100px;
display:flex;
background-color: #FFFFFF;
}.flex-item{ width: 100px;
height: 100px;
}.red{
background: red;
}.green{
background: green;
}.blue{
background: blue;
} |
视图样式justify-content: space-between的效果图：
WXML代码如下：
[XML] 纯文本查看 复制代码
|
1
2
3
4
5
|
<view class="flex-wrp space-between">
<view class="flex-item" style="background: red"></view>
<view class="flex-item" style="background: green"></view>
<view class="flex-item" style="background: blue"></view>
</view>
|
WXSS代码如下：
[CSS] 纯文本查看 复制代码
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
|
.space-between{ flex-direction:row;
justify-content: space-between;
}.flex-wrp{ height: 100px;
display:flex;
background-color: #FFFFFF;
}.flex-item{ width: 100px;
height: 100px;
}.red{
background: red;
}.green{
background: green;
}.blue{
background: blue;
} |
视图样式justify-content: space-around的效果图：
WXML代码如下：
[XML] 纯文本查看 复制代码
|
1
2
3
4
5
|
<view class="flex-wrp space-around">
<view class="flex-item" style="background: red"></view>
<view class="flex-item" style="background: green"></view>
<view class="flex-item" style="background: blue"></view>
</view>
|
WXSS代码如下：
[CSS] 纯文本查看 复制代码
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
|
.space-around{ flex-direction:row;
justify-content: space-around;
}.flex-wrp{ height: 100px;
display:flex;
background-color: #FFFFFF;
}.flex-item{ width: 100px;
height: 100px;
}.red{
background: red;
}.green{
background: green;
}.blue{
background: blue;
} |
视图样式align-items: flex-end的效果图：
WXML代码如下：
[XML] 纯文本查看 复制代码
|
1
2
3
4
5
|
<view class="flex-wrp align-items-flex-end">
<view class="flex-item" style="background: red"></view>
<view class="flex-item" style="background: green"></view>
<view class="flex-item" style="background: blue"></view>
</view>
|
WXSS代码如下：
[CSS] 纯文本查看 复制代码
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
.align-items-flex-end{ height: 200px;
flex-direction:row;
justify-content: center;
align-items: flex-end;
}.flex-wrp{ height: 100px;
display:flex;
background-color: #FFFFFF;
}.flex-item{ width: 100px;
height: 100px;
}.red{
background: red;
}.green{
background: green;
}.blue{
background: blue;
} |
视图样式align-items: center的效果图：
WXML代码如下：
[XML] 纯文本查看 复制代码
|
1
2
3
4
5
|
<view class="flex-wrp align-items-center">
<view class="flex-item" style="background: red"></view>
<view class="flex-item" style="background: green"></view>
<view class="flex-item" style="background: blue"></view>
</view>
|
WXSS代码如下：
[CSS] 纯文本查看 复制代码
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
.align-items-center{
height: 200px;
flex-direction:row;
justify-content: center;
align-items: center;
}.flex-wrp{ height: 100px;
display:flex;
background-color: #FFFFFF;
}.flex-item{ width: 100px;
height: 100px;
}.red{
background: red;
}.green{
background: green;
}.blue{
background: blue;
} |
视图样式align-items: flex-start的效果图：
WXML代码如下：
[XML] 纯文本查看 复制代码
|
1
2
3
4
5
|
<view class="flex-wrp align-items-flex-start">
<view class="flex-item" style="background: red"></view>
<view class="flex-item" style="background: green"></view>
<view class="flex-item" style="background: blue"></view>
</view>
|
WXSS代码如下：
[CSS] 纯文本查看 复制代码
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
.align-items-flex-start{ height: 200px;
flex-direction:row;
justify-content: center;
align-items: flex-start;
}.flex-wrp{ height: 100px;
display:flex;
background-color: #FFFFFF;
}.flex-item{ width: 100px;
height: 100px;
}.red{
background: red;
}.green{
background: green;
}.blue{
background: blue;
} |
主要属性：
排列方式（flex-direction），用于wxss
|
属性
|
描述
|
|
row
|
横向排列
|
|
column
|
纵向排列
|
弹性项目内容对齐（justify-content），用于wxss
|
属性
|
描述
|
|
flex-start
|
弹性项目向行头紧挨着填充
|
|
flex-end
|
弹性项目向行尾紧挨着填充
|
|
center
|
弹性项目居中紧挨着填充
|
|
space-between
|
弹性项目平均分布在该行上
|
|
space-around
|
弹性项目平均分布在该行上，两边留有一半的间隔空间
|
项目在容器内侧轴方位的对齐方式（align-items），用于wxss
|
属性
|
描述
|
|
stretch
|
默认值，弹性项目被拉伸以适应容器
|
|
center
|
弹性项目位于容器的中心
|
|
flex-start
|
弹性项目位于容器的开头
|
|
flex-end
|
弹性项目位于容器的结尾
|
|
baseline
|
弹性项目位于容器的基线上
|