当前位置：首页 > uni-app

uniapp布局样式

2026-02-05 20:02:25uni-app

uniapp布局样式基础

uniapp支持使用Flex布局和Grid布局，默认采用Flex布局方式。在uni.css中已内置Flex相关样式类，可直接使用。

Flex布局常用样式类：

flex：启用Flex布局
flex-row：横向排列（默认）
flex-column：纵向排列
justify-start/center/end/between/around：主轴对齐方式
items-start/center/end/stretch：交叉轴对齐方式

页面布局实现方式

视图容器组件

<view>：基础视图容器，类似HTML的<div>
<scroll-view>：可滚动视图区域
<swiper>：滑块视图容器

示例代码

<template>
  <view class="container">
    <view class="header">头部</view>
    <view class="content">
      <view v-for="i in 5" :key="i" class="item">项目{{i}}</view>
    </view>
    <view class="footer">底部</view>
  </view>
</template>

<style>
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.header, .footer {
  height: 80rpx;
  background-color: #007AFF;
  color: white;
}
.content {
  flex: 1;
  overflow: auto;
}
.item {
  height: 120rpx;
  margin: 20rpx;
  background-color: #f0f0f0;
}
</style>

响应式布局处理

uniapp支持使用rpx单位实现响应式布局，750rpx等于屏幕宽度。

媒体查询示例

uniapp布局样式

@media screen and (min-width: 768px) {
  .item {
    width: 50%;
    float: left;
  }
}

条件编译实现多端适配

<!-- #ifdef H5 -->
<view class="pc-style">PC端样式</view>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<view class="wechat-style">微信小程序样式</view>
<!-- #endif -->

常见布局模式

两栏布局

.two-column {
  display: flex;
}
.sidebar {
  width: 200rpx;
}
.main-content {
  flex: 1;
}

等分布局

.equal-distribution {
  display: flex;
}
.equal-distribution view {
  flex: 1;
  text-align: center;
}

定位布局

uniapp布局样式

.position-container {
  position: relative;
  height: 300rpx;
}
.position-item {
  position: absolute;
  top: 20rpx;
  right: 20rpx;
  width: 100rpx;
  height: 100rpx;
}

样式编写规范

使用scoped样式避免污染全局样式

<style scoped>
/* 这里的样式只作用于当前组件 */
</style>

全局样式写在App.vue或单独样式文件中
避免直接使用平台特有样式，如-webkit-box

推荐使用CSS变量管理主题色等公共样式

:root {
--primary-color: #007AFF;
}
.button {
background-color: var(--primary-color);
}

标签: 样式布局

分享给朋友：

网页制作 css样式

CSS样式基础 CSS（层叠样式表）用于控制网页的视觉表现，包括布局、颜色、字体等。以下为关键知识点和实用方法：选择器与样式规则 CSS通过选择器定位HTML元素并应用样式： /*…

vue实现弹性布局

使用 Flexbox 实现弹性布局在 Vue 中实现弹性布局可以借助 CSS Flexbox 特性，结合 Vue 的模板和样式绑定能力。Flexbox 是一种现代的布局模式，能够轻松实现响应式设计。…

vue 实现拖拽布局

Vue 实现拖拽布局的方法使用原生HTML5拖拽API 通过HTML5的draggable属性和Vue的事件绑定实现基础拖拽功能。在元素上添加draggable="true"，并通过@dragsta…

vue实现复杂布局

Vue 实现复杂布局的方法 Vue 提供了多种方式来实现复杂布局，结合现代 CSS 技术和 Vue 的特性可以高效地构建响应式、可维护的界面。使用 Grid 布局 CSS Grid 是处理复杂二维…

vue实现布局组件

Vue 实现布局组件的方法基础布局组件结构使用 Vue 的单文件组件（SFC）创建一个基础布局组件。布局组件通常包含头部、侧边栏、主体内容和页脚。 <template> <…

vue实现禁用样式

Vue 中禁用样式的方法在 Vue 项目中，可以通过多种方式实现禁用样式。以下是几种常见的方法：动态绑定 class 或 style 通过 Vue 的 v-bind 动态绑定 class 或…

uniapp布局样式