uniapp中设置全局页面背景色的简单教程

当我们需要为Uniapp中的多个页面同时设置相同的背景色时，可以使用全局样式来方便地实现这一目的。下面是在Uniapp中设置全局页面背景色的简单教程：

设置全局样式

1. 在 App.vue 中的 <style> 标签中添加全局样式，例如：

page {
  background-color: #f5f5f5;
}

这里的 page 选择器表示所有页面的根元素。

1. 在 pages.json 中的 globalStyle 字段中添加与全局样式相同的样式，例如：

{
  "globalStyle": {
    "page": {
      "background-color": "#f5f5f5"
    }
  }
}

这里的 page 表示所有页面的根元素。

示例说明

示例1：设置全局背景颜色为白色

1. 在 App.vue 中的 <style> 标签中添加全局样式：

page {
  background-color: #ffffff;
}

1. 在 pages.json 中的 globalStyle 字段中添加全局样式：

{
  "globalStyle": {
    "page": {
      "background-color": "#ffffff"
    }
  }
}

示例2：设置全局背景颜色为灰色

1. 在 App.vue 中的 <style> 标签中添加全局样式：

page {
  background-color: #f5f5f5;
}

1. 在 pages.json 中的 globalStyle 字段中添加全局样式：

{
  "globalStyle": {
    "page": {
      "background-color": "#f5f5f5"
    }
  }
}

通过以上示例，我们可以轻松地实现为Uniapp中的多个页面设置相同背景色的需求。同时，也可以根据需求进行个性化设置。