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 + Vue 3 + uni-app 的灵活用工系统：四端架构与业务流程设计
vue.js·spring boot·uni-app·灵活用工·灵工系统
Dumbness3 天前
订阅消息弹窗必须在用户点击里调：联调实验室里 timing 和 Mock 支付通知踩的坑
javascript·uni-app
码间留白4 天前
uni-app 鸿蒙离线打包：一个改动从源码到真机要穿过几条链
uni-app·鸿蒙·deveco·离线打包·uts插件
多客：duokelijie5 天前
代练订单系统选型思路：跨品类游戏接入、订单分层管理、自动结算逻辑拆解！
数据库·mysql·微信小程序·前端框架·uni-app·php·持续部署
码间留白5 天前
鸿蒙端对接 BLE 血压计：从一次握手到读数入库（二）设备篇
物联网·uni-app·鸿蒙·蓝牙ble·血压计
华玥作者6 天前
Vue 3 + TypeScript + uni-app 组件库推荐：hy-app（华玥组件库）
vue.js·typescript·uni-app
FinelyYang6 天前
uniapp使用kkfileview在线预览ppt，excel，word，pdf类型文件
pdf·uni-app·powerpoint
2501_916008896 天前
iPhone 设备信息查看，用 KeyMob 看型号、序列号、电池健康和 UDID
android·ios·小程序·https·uni-app·iphone·webview
ModyQyW7 天前
vite-plugin-uni-manifest 0.7：在 uni-app 读取之前生成
前端·uni-app
lyz2468597 天前
uniapp vue3 小程序开发注意事项
uni-app
热门推荐
01国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）02如何新建文件夹？ 电脑新建文件夹的4种方法03历年考研数学一、数学二、数学三真题试卷及答案PDF04几个好用的ip纯净度检测网站05GitHub 镜像站点06微信历史版本含下载地址（ Windows PC | 安卓 | MAC ）及设置微信不更新07苹果iPA游戏软件资源下载网站08昇腾910B系列芯片完全指南：四款型号对比、服务器选型与大模型部署实战09蜘蛛磁力 搜索引擎大全，如何使用蜘蛛磁力查找磁力链接10Dify：一站式AI应用开发平台全解析与Windows部署指南