Uniapp：view容器(容器布局)

Monly212025-04-23 8:26

目录

  • 一、基本概述
  • 二、属性说明
  • 三、常用布局
    • [3.1 横向布局](#3.1 横向布局)
    • [3.2 纵向布局](#3.2 纵向布局)
    • [3.3 更多布局](#3.3 更多布局)
      • [3.3.1 纵向布局-自动宽度](#3.3.1 纵向布局-自动宽度)
      • [3.3.2 纵向布局-固定宽度](#3.3.2 纵向布局-固定宽度)
      • [3.3.3 横向布局-自动宽度](#3.3.3 横向布局-自动宽度)
      • [3.3.4 横向布局-居中](#3.3.4 横向布局-居中)
      • [3.3.5 横向布局-居右](#3.3.5 横向布局-居右)
      • [3.3.6 横向布局-平均分布](#3.3.6 横向布局-平均分布)
      • [3.3.7 横向布局-两端对齐](#3.3.7 横向布局-两端对齐)
      • [3.3.8 横向布局-自动填充](#3.3.8 横向布局-自动填充)
      • [3.3.9 横向布局-换行展示](#3.3.9 横向布局-换行展示)
      • [3.3.10 横向布局-垂直分布](#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 手指松开后点击态保留时间，单位毫秒

实例代码

html 复制代码 
<view class="box-container" hover-class="box-container-hover" hover-start-time="100" hover-stay-time="1000">视图容器</view>
css 复制代码 
.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 横向布局

html 复制代码 
<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>
css 复制代码 
.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 纵向布局

html 复制代码 
<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>
css 复制代码 
.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 纵向布局-自动宽度

html 复制代码 
<view class="text">纵向布局-自动宽度</view>
css 复制代码 
.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 纵向布局-固定宽度

html 复制代码 
<view class="text" style="width: 300rpx;">纵向布局-固定宽度</view>
css 复制代码 
.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 横向布局-自动宽度

html 复制代码 
<view class="uni-flex uni-row">
  <view class="text">横向布局-自动宽度</view>
  <view class="text">横向布局-自动宽度</view>
</view>
css 复制代码 
.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 横向布局-居中

html 复制代码 
<view class="uni-flex uni-row uni-center">
  <view class="text">横向布局-居中</view>
  <view class="text">横向布局-居中</view>
</view>
css 复制代码 
.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 横向布局-居右

html 复制代码 
<view class="uni-flex uni-row uni-right">
  <view class="text">横向布局-居右</view>
  <view class="text">横向布局-居右</view>
</view>
css 复制代码 
.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 横向布局-平均分布

html 复制代码 
<view class="uni-flex uni-row">
  <view class="text uni-aver">横向布局-平均分布</view>
  <view class="text uni-aver">横向布局-平均分布</view>
</view>
css 复制代码 
.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 横向布局-两端对齐

html 复制代码 
<view class="uni-flex uni-row .uni-between">
    <view class="text">横向布局-两端对齐</view>
    <view class="text">横向布局-两端对齐</view>
</view>
css 复制代码 
.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 横向布局-自动填充

html 复制代码 
<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>
css 复制代码 
.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 横向布局-换行展示

html 复制代码 
<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>
css 复制代码 
.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 横向布局-垂直分布

html 复制代码 
<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>
css 复制代码 
.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;
}
相关推荐
七七小报35 分钟前
uniapp-商城-32-shop 我的订单-订单详情和组件goods-list
uni-app
上趣工作室7 小时前
uniapp开发2--uniapp中的条件编译总结
uni-app
@泽栖11 小时前
下载HBuilder X，使用uniapp编写微信小程序
微信小程序·小程序·uni-app
程序员王天15 小时前
Uniapp 自定义TabBar + 动态菜单实现教程（Vuex状态管理详解）
微信小程序·uni-app
卡尔特斯19 小时前
Uniapp 控制台日志工具（DZMUniappConsoleLog）
前端·uni-app
萝卜白菜都是菜19 小时前
uniapp打包app关于获取本机相机、相册、麦克风等权限问题（ios第一次安装权限列表里没有对应权限问题）
uni-app
xixixin_21 小时前
【uniapp】uni.setClipboardData 方法失效 bug 解决方案
java·前端·uni-app
学前端搞口饭吃1 天前
uniapp打ios包
ios·uni-app
```陪伴1 天前
uniapp打包IOS私钥证书过期了，如何在非mac系统操作
macos·ios·uni-app
热门推荐
01KGG转MP3工具|非KGM文件|解密音频02从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑03我决定放弃搞 Java 了04DeepSeek各版本说明与优缺点分析05yolov8，yolo11，yolo12 服务器训练到部署全流程 笔记06RAG 实践- Ollama+RagFlow 部署本地知识库07YOLOv8入门 | 重要性能衡量指标、训练结果评价及分析及影响mAP的因素【发论文关注的指标】08苍穹外卖面试总结09如何在WPS和Word/Excel中直接使用DeepSeek功能10组基轨迹建模 GBTM的介绍与实现（Stata 或 R）