解读和分析微信小程序官方组件:一、view(视图容器 )
view组件说明:
视图容器
跟html代码中的p一样,可以包裹其他的组件,也可以被包裹在其他的组件内部。用起来比较自由随意,没有固定的结构。
view组件的用法:
示例项目的wxml代码:
[XML] 纯文本查看 复制代码
<view> <view>退格</view> <view>清屏</view> <view>+/-</view> <view>+</view> </view> <view> <view>9</view> <view>8</view> <view>7</view> <view>-</view> </view> <view> <view>6</view> <view>5</view> <view>4</view> <view>×</view> </view> <view> <view>3</view> <view>2</view> <view>1</view> <view>÷</view> </view> <view> <view>0</view> <view>.</view> <view>历史</view> <view>=</view> </view>
示例项目的WXSS代码:
[CSS] 纯文本查看 复制代码
.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] 纯文本查看 复制代码
<view> <view></view> <view></view> <view></view> </view>
WXSS代码如下:
[CSS] 纯文本查看 复制代码
.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] 纯文本查看 复制代码
<view> <view></view> <view></view> <view></view> </view>
WXSS代码如下:
[CSS] 纯文本查看 复制代码
.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] 纯文本查看 复制代码
<view> <view></view> <view></view> <view></view> </view>
WXSS代码如下:
[CSS] 纯文本查看 复制代码
.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] 纯文本查看 复制代码
<view> <view></view> <view></view> <view></view> </view>
WXSS代码如下:
[CSS] 纯文本查看 复制代码
.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] 纯文本查看 复制代码
<view> <view></view> <view></view> <view></view> </view>
WXSS代码如下:
[CSS] 纯文本查看 复制代码
.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] 纯文本查看 复制代码
<view> <view></view> <view></view> <view></view> </view>
WXSS代码如下:
[CSS] 纯文本查看 复制代码
.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] 纯文本查看 复制代码
<view> <view></view> <view></view> <view></view> </view>
WXSS代码如下:
[CSS] 纯文本查看 复制代码
.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] 纯文本查看 复制代码
<view> <view></view> <view></view> <view></view></view>
WXSS代码如下:
[CSS] 纯文本查看 复制代码
.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] 纯文本查看 复制代码
<view> <view></view> <view></view> <view></view></view>
WXSS代码如下:
[CSS] 纯文本查看 复制代码
.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] 纯文本查看 复制代码
<view> <view></view> <view></view> <view></view></view>
WXSS代码如下:
[CSS] 纯文本查看 复制代码
.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 | 弹性项目位于容器的基线上 |