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;
}
相关推荐
00后程序员张15 小时前
苹果App Store上架指南：费用、原理与步骤详解
android·ios·小程序·https·uni-app·iphone·webview
特创数字科技1 天前
【uni-app x】告别系统相机限制！三端通用自定义相机组件：任意布局、静默拍照、录像、水印叠加、连拍回图一次搞定
前端·数码相机·uni-app
Martin -Tang1 天前
uniapp app嵌套webview 弹窗方式
android·ios·uni-app
郑州光合科技余经理1 天前
同城电商系统：库存变更怎么同步到订单
java·开发语言·前端·后端·uni-app·php·ai编程
CHB2 天前
一文讲透原生渲染和自渲染
flutter·react native·uni-app
码兄科技8 天前
24小时自助健身房系统软件开发实战指南：功能设计与部署方案
java·spring boot·uni-app
2501_916007478 天前
苹果商店iOS应用上架费用全面解析：开发者计划与审核费用计算
android·ios·小程序·https·uni-app·iphone·webview
2501_916008898 天前
如何实现iOS App代码混淆：SwiftShield使用指南
android·ios·小程序·https·uni-app·iphone·webview
2501_916008898 天前
怎么用 Godot 导出 iOS 应用并上架 App Store？签名字段该填什么？
android·ios·小程序·https·uni-app·iphone·webview
郑州光合科技余经理9 天前
同城外卖小程序开发：下单成功后，后台导出能不能对上用户端状态
开发语言·前端·git·后端·uni-app·php·ai编程
热门推荐
01国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）02Telegram APK 下载安装完整指南 — 2026年最新03历年考研数学一、数学二、数学三真题试卷及答案PDF04GitHub 镜像站点05蜘蛛磁力 搜索引擎大全，如何使用蜘蛛磁力查找磁力链接062026 爱知・名古屋亚运会怎么看？直播平台+赛程安排分享07微信历史版本含下载地址（ Windows PC | 安卓 | MAC ）及设置微信不更新08给AI一张“业务概念地图“：本体如何从哲学走向企业智能09jev-ultrafast 深度解析：7 秒订机票的浏览器 Agent 是如何炼成的102026 年 9 月国内外主流大模型横向硬核评测：价格、算力、业务场景全维度对比，GPT‑6 Astra横空出世