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;
}
相关推荐
PedroQue9916 小时前
unix-utils v0.2.0 发布：modal 全端统一，自绘窗口解决输入框难题
前端·uni-app
2301_32241428043 天前
springboot学生课堂出勤统计系统15835-计算机毕设 原创（免费领源码+部署教程+开发环境）
java·mysql·随机森林·微信小程序·uni-app·微信开发者工具·推荐算法
2501_915921435 天前
iOS应用从开发到上架App Store的完整步骤详解
android·ios·小程序·https·uni-app·iphone·webview
小蒜学长7 天前
基于SpringBoot+uni-app的闪洁家政系统的设计与实现（代码+数据库+LW）
java·spring boot·后端·uni-app·家政服务
anyup_前端梦工厂7 天前
uni-app 模板 Starter 一键清理 Skill 发布
前端·人工智能·uni-app
anyup_前端梦工厂7 天前
将uni-app工程迁移uni-app x，AI 能帮我们做什么？
前端·人工智能·uni-app
蒿豪郝灬号7 天前
UniApp接入鸿蒙版阿里百川
华为·uni-app·harmonyos
2501_915921438 天前
详细教程：使用Perfdog工具测量iOS应用的功耗性能与优化方法
android·macos·ios·小程序·uni-app·cocoa·iphone
梦曦i8 天前
uni-app、uni-app x 与 Flutter 深度对比：2026年跨平台开发框架选型指南
flutter·uni-app·uni-app x
普马萨特9 天前
uni-app x 定位踩坑实录：H5/小程序/App 统一经纬度与逆地理编码
uni-app
热门推荐
01国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）02如何新建文件夹？ 电脑新建文件夹的4种方法03历年考研数学一、数学二、数学三真题试卷及答案PDF04GitHub 镜像站点05几个好用的ip纯净度检测网站06「全语录+省流版」邵艾伦 × 孙宇晨：聊风口、聊个人IP、聊年轻人如何抓住 AI 时代的机会07苹果iPA游戏软件资源下载网站08昇腾910B系列芯片完全指南：四款型号对比、服务器选型与大模型部署实战09Windows 10/11 如何退出微软账户并改用本地账户登录（含找不到选项的解决方法）10蜘蛛磁力 搜索引擎大全，如何使用蜘蛛磁力查找磁力链接