uniapp 设置页面背景色

发狂精灵

已于 2024-04-23 13:34:42 修改

阅读量6.6k

点赞数 12

分类专栏： Uniapp 文章标签： uni-app 前端

于 2024-04-22 09:19:44 首次发布

本文链接：https://blog.youkuaiyun.com/fakuangjingling/article/details/138059297

版权

Uniapp 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了如何在Vue应用中设置全局和单页面的背景颜色，包括在App.vue的style标签中使用`background-color`，以及注意在非scoped的style标签中设置以确保效果。同时提到了在使用scss时，scoped属性对页面样式的影响。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.全局页面背景色设置

在App.vue的style样式表中设置

<style>	
page {
	background-color: blue;
}
</style>

2.单页面设置

对应页面中的style样式表中设置，且不能有scoped属性否则不生效

<style>
page {
	background-color: #F0AD4E;
}
</style>

<style lang="scss" scoped>
	//页面原本样式
</style>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

发狂精灵

关注关注

12
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Uniapp：设置页面导航条

MMF博客园

04-28

222

Uniapp：设置页面导航条

uniapp页面设置

root1232432524的博客

10-11

786

去除导航栏: "navigationStyle":"custom", //可以去掉小程序端的顶部导航 "app-plus":{ "titleNView":false // 去掉APP、H5的顶部导航 } 设置导航栏背景色,文字,字体颜色: "navigationBarTitleText": "uni-app",//标题 "navigationBarBackgroundColor": "#F8F8F8",//背景色 "backgroundColor": "#F8F8F8"//字体颜色

参与评论您还未登录，请先登录后发表或查看评论

uniapp App端页面设置背景色无效的问题及解决办法

我的博客

04-20

6970

解决办法一： style去掉scoped // 修改前 <style lang="scss" scoped> page { background-color: #f5f5f5; } </style> // 修改后 <style lang="scss"> page { background-color: #f5f5f5; } </style> 解决办法二：为了避免页面的样式影响到其他页面，需要保留scoped。这时可以在另外一个没有scop

【uni-app】设置背景颜色相关

cc蒲公英的博客

11-16

5958

【uni-app】设置背景颜色相关

uniapp(微信小程序)background-image无法读取本地图片

最新发布

qq_39691676的博客

05-13

434

【代码】uniapp(微信小程序)background-image无法读取本地图片。

uni-app中全局设置页面背景颜色

laya1211的博客

07-21

1万+

在uni-app中设置背景颜色，想象中应该很简单，其实里面也还是有点小坑的，我们来一起看一下

uniapp设置页面背景颜色

weixin_45573681的博客

04-24

2783

在uniapp中，给当前页面添加满屏背景颜色，然后设置背景颜色，常见的有几种方式。

uni-app设置单个页面颜色

jwq

03-21

2114

uni-app设置单个页面颜色。

uniapp自定义导航栏背景色淡入淡出效果

qq_45797421的博客

02-01

731

/ 页面滚动//定义一个最大值(根据页面情况滚动的情况,别页面滚动的最大距离不到200,你定义一个200,那肯定是效果不好的)// 这是 _this.bgc是我自己定义的变量,到时候切换成你得变量// 然后把这个变量写到你自定义导航栏那里${// 页面滚动 onPageScroll(e => {

uniapp为page设置背景色不生效 & lang=“scss“ scoped的page样式失效，uniapp重复打开页面

cs_zhao18的博客

04-03

3347

page选择器在小程序和app编译中是页面的父节点，所以加上scoped限定后，会导致无法选中。详细了解请移步源码。二、uniapp生成的app启动时，多个请求都因为未登录，转至登录页面，使其多次打开。解决办法就是给 page 选择器，单独设置一个 style，去掉scoped就行。在用uniapp生成网页和H5时有效，但生成小程序或者app时无效。一、lang="scss" scoped中的page选择器的样式失效。这是因为函数异步执行，和跳转后没有关闭上一页面导致的。

12.关于uniapp小程序设置页面背景色无效的问题及解决方案

endingCode

03-20

5163

1、问题的产生需求：登录页面根据三种不同的角色，呈现不同的界面，背景色是其中一个元素。问题：在uniapp中这么设置背景色不管用。（在微信开发者工具中，这样是可以的。） <style scoped> page{ height: 100%; background-color: #007AFF; } </style> 2、解决方法：去掉<style> page{ height: 100%; background-color: #007AFF; }

uniapp设置全局页面背景色

技术应让更广泛的人群流入到实际产品开发中才是正统

05-03

878

声明手写css的重要性,因为微信小程序之类的他自带默认的颜色值,你想覆盖就得声明你写的代码更具优先级。

uni-app如何设置页面背景色

m0_59006402的博客

08-17

830

为了不污染其它样式,在添加一个style

uniapp 设置页面背景图，背景色，两个的设置方法差不多

qq_37455326的博客

01-15

4383

将相对应页面的类设置为page-edit就可以了，如果只加page后面跟样式的话就会应用于所有页面。.page-edit中的样式是写在APP.vue文件中的。

uni-app修改页面背景色:

热门推荐

SunPeng的博客

10-04

1万+

uni-app修改页面背景色: , 在pages.json里面设置单页面背景色不起作用

uniapp给页面设置背景色

qq_43378240的博客

01-12

4179

直接在当前页面的style里面设置 page { background-color: #F6F7F9; }

uniapp怎么给页面添加整个页面的背景颜色

qq_50952645的博客

06-19

1817

1、打开page.json文件，添加一下画红色的代码（顶部导航栏的背景颜色 ）2、在页面添加页面颜色以及高度。

uni-app的页面背景颜色怎么设置

JEFF_xieyuzhi的博客

02-07

6633

这个页面的背景颜色是这样的，我现在想让我的某个页面的背景颜色变成蓝色，直接在页面的样式里面加入下面代码就可以了。 page{ background-color: #3c76cd; } ...

uniapp 背景颜色推荐

03-08

### UniApp 背景颜色设置与选择的最佳实践在UniApp项目中，背景颜色的设定不仅影响视觉效果还涉及到用户体验。对于页面级别的背景颜色调整，可以通过修改`pages.json`中的样式属性来完成[^1]。 #### 使用全局样式定义背景颜色 为了保持一致性和减少重复工作，在项目的根目录下创建一个公共CSS文件（如`common.css`），在此文件里集中管理所有的基础样式，包括但不限于背景颜色。这样做的好处是可以方便地统一整个应用程序的颜色主题，并且易于维护和更新。 ```css /* common.css */ body, page { background-color: #f0f0f0; /* 设置默认浅灰色作为全局背景色 */ } ``` #### 动态更改单页背景颜色 如果希望某个特定页面拥有不同的背景颜色，则可以在该页面对应的`.vue`文件内的`<style>`标签中覆盖上述全局设置： ```html <style scoped> page { background-color: #ffffff !important; /* 强制此页面采用白色背景 */ } </style> ``` #### 利用条件渲染改变背景颜色 当需要根据用户的交互或其他逻辑动态切换背景颜色时，可以借助Vue的数据绑定机制实现这一点。例如，通过监听事件或响应状态变化来触发背景样式的变更。 ```javascript // 在 script 部分定义 data 和 methods 来控制背景颜色的变化 export default { data() { return { backgroundColor: '#ebebeb' // 初始化背景颜色变量 } }, methods: { changeBackground(newColor) { this.backgroundColor = newColor; } } }; ``` ```html  <div :style="{ 'background-color': backgroundColor }">  </div> <button @click="changeBackground('#ffdddd')">点击变红</button> <button @click="changeBackground('#ddffff')">点击变蓝</button> ``` #### 注意事项 - **跨平台一致性**：考虑到uni-app支持多端运行的特点，在设计阶段就要充分考虑各终端设备间的显示差异，测试不同环境下背景颜色的表现是否符合预期。 - **性能考量**：频繁地修改DOM元素的样式可能会带来一定的性能开销，尤其是在移动环境中更为明显；因此应尽量减少不必要的重绘操作。 - **无障碍访问**：确保所选背景颜色能够提供足够的对比度，以便于视力受限的人群也能轻松阅读屏幕上的文字信息。