Uniapp：view容器(容器布局)

一、基本概述
二、属性说明
三、常用布局
- 3.1 横向布局
- 3.2 纵向布局
- 3.3 更多布局
- - 3.3.1 纵向布局-自动宽度
  - 3.3.2 纵向布局-固定宽度
  - 3.3.3 横向布局-自动宽度
  - 3.3.4 横向布局-居中
  - 3.3.5 横向布局-居右
  - 3.3.6 横向布局-平均分布
  - 3.3.7 横向布局-两端对齐
  - 3.3.8 横向布局-自动填充
  - 3.3.9 横向布局-换行展示
  - 3.3.10 横向布局-垂直分布

一、基本概述

view是一个视图容器，本身不显示任何可视化元素。用途都是为了包裹其他真正显示的组件。它类似于传统html中的div，用于包裹各种元素内容。

二、属性说明

属性名	类型	默认值	说明
hover-class	String	none	指定按下去的样式类。当 hover-class=“none” 时，没有点击态效果
hover-stop-propagation	Boolean	false	指定是否阻止本节点的祖先节点出现点击态，App、H5、支付宝小程序、百度小程序不支持（支付宝小程序、百度小程序文档中都有此属性，实测未支持）
hover-start-time	Number	50	按住后多久出现点击态，单位毫秒
hover-stay-time	Number	400	手指松开后点击态保留时间，单位毫秒

实例代码

<view class="box-container" hover-class="box-container-hover" hover-start-time="100" hover-stay-time="1000">视图容器</view>

.box-container {width: 200px;height: 200px;background-color: orange;text-align: center;line-height: 200px;
}
.box-container-hover {background-color: blue;
}

三、常用布局

Flex是Flexible Box的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性。当设置display: flex后，继续给view等容器组件设置flex-direction:row或column，就可以在该容器内按行或列排布子组件。uni-app推荐使用flex布局。因为flex布局有利于跨更多平台，尤其是采用原生渲染的平台。

3.1 横向布局

在这里插入图片描述

<view class="uni-flex uni-row"><view class="flex-item uni-bg-red">A</view><view class="flex-item uni-bg-green">B</view><view class="flex-item uni-bg-blue">C</view>
</view>

.uni-flex {display: flex;
}
.uni-row {flex-direction: row;
}
.flex-item {width: 33.3%;height: 100px;text-align: center;line-height: 100px;
}
.uni-bg-red{background:#F76260; color:#FFF;
}
.uni-bg-green{background:#09BB07; color:#FFF;
}
.uni-bg-blue{background:#007AFF; color:#FFF;
}

3.2 纵向布局

在这里插入图片描述

<view class="uni-flex uni-column"><view class="flex-item flex-item-V uni-bg-red">A</view><view class="flex-item flex-item-V uni-bg-green">B</view><view class="flex-item flex-item-V uni-bg-blue">C</view>
</view>

.uni-flex {display: flex;
}
.uni-column {flex-direction: column;
}
.flex-item {width: 33.3%;height: 100px;text-align: center;line-height: 100px;
}
.uni-bg-red{background:#F76260; color:#FFF;
}
.uni-bg-green{background:#09BB07; color:#FFF;
}
.uni-bg-blue{background:#007AFF; color:#FFF;
}

3.3 更多布局

在这里插入图片描述

3.3.1 纵向布局-自动宽度

<view class="text">纵向布局-自动宽度</view>

.text {margin: 7px 5px;padding: 0 10px;background-color: #ebebeb;height: 35px;line-height: 35px;text-align: center;color: #777;font-size: 13px;
}

3.3.2 纵向布局-固定宽度

<view class="text" style="width: 300rpx;">纵向布局-固定宽度</view>

.text {margin: 7px 5px;padding: 0 10px;background-color: #ebebeb;height: 35px;line-height: 35px;text-align: center;color: #777;font-size: 13px;
}

3.3.3 横向布局-自动宽度

<view class="uni-flex uni-row"><view class="text">横向布局-自动宽度</view><view class="text">横向布局-自动宽度</view>
</view>

.uni-flex {display: flex;
}
.uni-row {flex-direction: row;
}
.text {margin: 7px 5px;padding: 0 10px;background-color: #ebebeb;height: 35px;line-height: 35px;text-align: center;color: #777;font-size: 13px;
}

3.3.4 横向布局-居中

<view class="uni-flex uni-row uni-center"><view class="text">横向布局-居中</view><view class="text">横向布局-居中</view>
</view>

.uni-flex {display: flex;
}
.uni-row {flex-direction: row;
}
.uni-center {-webkit-justify-content: center;justify-content: center;
}
.text {margin: 7px 5px;padding: 0 10px;background-color: #ebebeb;height: 35px;line-height: 35px;text-align: center;color: #777;font-size: 13px;
}

3.3.5 横向布局-居右

<view class="uni-flex uni-row uni-right"><view class="text">横向布局-居右</view><view class="text">横向布局-居右</view>
</view>

.uni-flex {display: flex;
}
.uni-row {flex-direction: row;
}
.uni-right {-webkit-justify-content: flex-end;justify-content: flex-end;
}
.text {margin: 7px 5px;padding: 0 10px;background-color: #ebebeb;height: 35px;line-height: 35px;text-align: center;color: #777;font-size: 13px;
}

3.3.6 横向布局-平均分布

<view class="uni-flex uni-row"><view class="text uni-aver">横向布局-平均分布</view><view class="text uni-aver">横向布局-平均分布</view>
</view>

.uni-flex {display: flex;
}
.uni-row {flex-direction: row;
}
.uni-aver {-webkit-flex: 1;flex: 1;
}
.text {margin: 7px 5px;padding: 0 10px;background-color: #ebebeb;height: 35px;line-height: 35px;text-align: center;color: #777;font-size: 13px;
}

3.3.7 横向布局-两端对齐

<view class="uni-flex uni-row .uni-between"><view class="text">横向布局-两端对齐</view><view class="text">横向布局-两端对齐</view>
</view>

.uni-flex {display: flex;
}
.uni-row {flex-direction: row;
}
.uni-between {-webkit-justify-content: space-between;justify-content: space-between;
}
.text {margin: 7px 5px;padding: 0 10px;background-color: #ebebeb;height: 35px;line-height: 35px;text-align: center;color: #777;font-size: 13px;
}

3.3.8 横向布局-自动填充

<view class="uni-flex uni-row"><view class="text" style="width: 200rpx;">固定宽度</view><view class="text uni-fill">自动占满余量</view>
</view><view class="uni-flex uni-row"><view class="text" style="width: 200rpx;">固定宽度</view><view class="text uni-fill">自动占满</view><view class="text" style="width: 200rpx;">固定宽度</view>
</view>

.uni-flex {display: flex;
}
.uni-row {flex-direction: row;
}
.uni-fill {-webkit-flex: 1;flex: 1;
}
.text {margin: 7px 5px;padding: 0 10px;background-color: #ebebeb;height: 35px;line-height: 35px;text-align: center;color: #777;font-size: 13px;
}

3.3.9 横向布局-换行展示

<view class="uni-flex uni-row uni-wrap"><view class="text" style="width: 280rpx;">一行显示不全,wrap折行</view><view class="text" style="width: 280rpx;">一行显示不全,wrap折行</view><view class="text" style="width: 280rpx;">一行显示不全,wrap折行</view>
</view>

.uni-flex {display: flex;
}
.uni-row {flex-direction: row;
}
.uni-wrap {-webkit-flex-wrap: wrap;flex-wrap: wrap;
}
.text {margin: 7px 5px;padding: 0 10px;background-color: #ebebeb;height: 35px;line-height: 35px;text-align: center;color: #777;font-size: 13px;
}

3.3.10 横向布局-垂直分布

<view class="uni-flex uni-row"><view class="text uni-flex uni-vertical uni-vertical-top"><text>垂直居顶</text></view><view class="text uni-flex uni-vertical uni-vertical-center"><text>垂直居中</text></view><view class="text uni-flex uni-vertical uni-vertical-end"><text>垂直居底</text></view>
</view>

.uni-flex {display: flex;
}
.uni-row {flex-direction: row;
}
.uni-vertical {-webkit-flex: 1;flex: 1;height: 200rpx;-webkit-justify-content: center;justify-content: center;
}
.uni-vertical-top {-webkit-align-items: flex-start;align-items: flex-start;
}
.uni-vertical-center {-webkit-align-items: center;align-items: center;
}
.uni-vertical-end {-webkit-align-items: flex-end;align-items: flex-end;
}
.text {margin: 7px 5px;padding: 0 10px;background-color: #ebebeb;height: 35px;line-height: 35px;text-align: center;color: #777;font-size: 13px;
}