当前位置：首页 > uni-app

uniapp 官方样式

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

Uniapp 官方样式介绍

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

内置基础样式

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

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

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

常用样式类

布局相关

.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 即可使用：

<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 配置默认样式行为

扩展样式方案

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

uniapp 官方样式

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

标签: 样式官方

分享给朋友：

vue样式绑定实现收藏

Vue 样式绑定实现收藏功能在 Vue 中，可以通过动态绑定样式来实现收藏功能，常见的方法是使用 v-bind:class 或 v-bind:style 来切换样式状态。使用 v-bind:cl…

h5实现表格样式

实现H5表格样式的方法使用HTML和CSS创建基础表格在HTML中，表格通过<table>标签定义，配合<tr>（行）、<td>（单元格）和<th>…

vue实现表格样式

Vue 实现表格样式的方法在 Vue 中实现表格样式可以通过多种方式完成，包括使用原生 HTML 表格、第三方组件库或自定义样式。以下是几种常见的方法：使用原生 HTML 表格通过 Vue 的…

vue实现统计设计样式

Vue 实现统计设计样式的方法在 Vue 中实现统计设计样式，通常需要结合数据可视化库和 CSS 样式。以下是几种常见的方法：使用 ECharts 实现数据可视化 ECharts 是一个强大的数…

vue卡片样式切换实现

实现 Vue 卡片样式切换的方法使用动态类绑定通过 v-bind:class 或简写 :class 动态切换类名，结合条件判断实现样式切换。例如： <template> <…

vue实现多选样式

Vue 实现多选样式的方法在 Vue 中实现多选样式可以通过多种方式完成，以下是几种常见的方法：使用 v-model 绑定数组通过 v-model 绑定一个数组，可以轻松实现多选功能。当用户勾…

uniapp 官方样式