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 |
弹性项目位于容器的基线上
|
以上就是解读和分析微信小程序官方组件：一、view（视图容器 ）的详细内容，更多请关注米云其它相关文章！
