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;
}
相关推荐
老李不敲代码1 小时前
榕壹云打车系统：基于Spring Boot+MySQL+UniApp的开源网约车解决方案
spring boot·mysql·微信小程序·uni-app·软件需求
lqj_本人5 小时前
鸿蒙OS&UniApp 开发实时聊天页面的最佳实践与实现#三方框架 #Uniapp
uni-app
不法14 小时前
uniapp 百家云直播插件打包失败
uni-app·插件使用
moxiaoran575321 小时前
uni-app学习笔记五-vue3响应式基础
笔记·学习·uni-app
Mr.app1 天前
uniapp(微信小程序)＞关于父子组件的样式传递问题(自定义组件样式穿透)
微信小程序·uni-app
老李不敲代码1 天前
榕壹云搭子系统技术解析：基于Spring Boot+MySQL+UniApp的同城社交平台开发实践
spring boot·mysql·微信小程序·uni-app·软件需求
七七小报1 天前
uniapp-商城-54-后台 新增商品（页面布局）
uni-app
HebyH_1 天前
2025前端面试遇到的问题(vue+uniapp+js+css)
前端·javascript·vue.js·面试·uni-app
gys98952 天前
android studio开发aar插件，并用uniapp开发APP使用这个aar
android·uni-app·android studio
自然 醒2 天前
荣耀手机，系统MagicOS 9.0 USB配置没有音频来源后无法被adb检测到，无法真机调试的解决办法
adb·uni-app
热门推荐
01YOLOv8入门 | 重要性能衡量指标、训练结果评价及分析及影响mAP的因素【发论文关注的指标】02从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑03KGG转MP3工具|非KGM文件|解密音频04【SpeedAI科研小助手】2分钟极速解决知网维普重复率、AIGC率过高，一键全文降！文件格式不变，公式都保留的！05Coze扣子平台完整体验和实践（附国内和国际版对比）06DeepSeek各版本说明与优缺点分析07苍穹外卖面试总结08YOLOv5改进 | 添加CA注意力机制 + 增加预测层 + 更换损失函数之GIoU09西电B测-计算机网络综合实验(含验收问题)10【解决】Android Gradle Sync 报错 Could not read workspace metadata