当前位置：首页 > uni-app

uniapp 官方样式

2026-02-06 06:17:55uni-app

Uniapp 官方样式介绍

Uniapp 提供了一套内置的官方样式库，主要用于快速构建跨平台应用界面。这些样式基于微信小程序的 WeUI 设计规范，并进行了跨平台适配。

内置基础样式

Uniapp 内置了基础 CSS 样式，包括：

uniapp 官方样式

页面背景色
字体大小
边距
弹性布局
文本对齐等

在项目中可以直接使用这些基础样式类，无需额外引入。

常用样式类

布局相关

.flex {
  display: flex;
}
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

边距相关

.m-10 {
  margin: 10px;
}
.p-20 {
  padding: 20px;
}

文本相关

.text-center {
  text-align: center;
}
.text-bold {
  font-weight: bold;
}

使用官方样式

在页面中直接添加 class 即可使用：

uniapp 官方样式

<view class="flex flex-center p-20">
  <text class="text-bold">Hello Uniapp</text>
</view>

主题色变量

Uniapp 提供了主题色变量，可以在全局样式文件中使用：

:root {
  --primary-color: #007AFF;
  --success-color: #4CD964;
  --warning-color: #F0AD4E;
  --error-color: #DD524D;
}

注意事项

官方样式在不同平台可能会有细微差异
如需深度定制，建议在 App.vue 中重写全局样式
移动端适配建议使用 rpx 单位
可通过修改 manifest.json 配置默认样式行为

扩展样式方案

对于更复杂的样式需求，可以考虑：

引入第三方 UI 库如 uView
使用 Sass/Less 预处理器
创建项目专属的样式工具类库

标签: 样式官方

分享给朋友：

修改elementui的样式

修改 ElementUI 样式的方法通过全局样式覆盖在项目的全局样式文件（如 App.vue 或 main.css）中直接覆盖 ElementUI 的默认样式。需确保选择器优先级高于默认样式，可通…

网页制作 css样式

CSS样式基础 CSS（层叠样式表）用于控制网页的视觉呈现，包括布局、颜色、字体等。以下是核心概念和常用方法：选择器与样式规则 CSS通过选择器匹配HTML元素并应用样式。常见选择器类型：…

vue实现收藏样式

实现收藏功能的基本思路在Vue中实现收藏样式通常需要结合点击事件和数据绑定。通过维护一个布尔值状态（如isFavorited）来控制样式的切换，同时可能涉及后端API的交互。基础实现代码示例 &…

vue实现抖动样式

实现抖动效果的CSS方法在Vue中实现抖动效果可以通过CSS动画或第三方库完成。以下是几种常见方法： CSS关键帧动画定义一个@keyframes抖动动画并应用到元素： .shake {…

vue实现禁用样式

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

vue实现样式切换

Vue 样式切换实现方法动态 class 绑定通过 v-bind:class 或简写 :class 实现动态样式切换，适用于需要根据条件切换多个 class 的场景： <template…

uniapp 官方样式