uni-app 的样式如何编写？

推荐答案

在 uni-app 中，样式的编写方式与传统的 Web 开发类似，主要通过 CSS 或 SCSS 来定义样式。uni-app 支持以下几种样式编写方式：

1. 内联样式：直接在组件的 style 属性中编写样式。
2. 单文件组件样式：在 .vue 文件的 <style> 标签中编写样式。
3. 全局样式：在 App.vue 或单独的 CSS 文件中定义全局样式。
4. 条件样式：通过动态绑定 class 或 style 来实现条件样式。

示例代码

// www.javascriptcn.com code example
<template>
  <view class="container" :style="dynamicStyle">
    <text class="text">Hello, uni-app!</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      dynamicStyle: {
        backgroundColor: 'lightblue',
        padding: '20px'
      }
    };
  }
};
</script>

<style>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.text {
  font-size: 24px;
  color: #333;
}
</style>

本题详细解读

1. 内联样式

内联样式是通过在组件的 style 属性中直接编写样式来实现的。这种方式适用于需要动态调整样式的场景。

<view style="background-color: lightblue; padding: 20px;">
  <text>Hello, uni-app!</text>
</view>

2. 单文件组件样式

在 .vue 文件的 <style> 标签中编写样式是最常见的方式。这种方式可以保持样式的模块化，便于维护。

// www.javascriptcn.com code example
<style>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.text {
  font-size: 24px;
  color: #333;
}
</style>

3. 全局样式

全局样式可以在 App.vue 或单独的 CSS 文件中定义，适用于整个应用的通用样式。

/* App.vue 或 global.css */
body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}

4. 条件样式

条件样式可以通过动态绑定 class 或 style 来实现。这种方式适用于根据应用状态动态调整样式的场景。

// www.javascriptcn.com code example
<template>
  <view :class="{ active: isActive }" :style="dynamicStyle">
    <text>Hello, uni-app!</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isActive: true,
      dynamicStyle: {
        backgroundColor: 'lightblue',
        padding: '20px'
      }
    };
  }
};
</script>

<style>
.active {
  background-color: yellow;
}
</style>

通过以上几种方式，开发者可以根据具体需求灵活地编写和管理 uni-app 中的样式。