Uniapp设置pages的backgroundColor无效

最新推荐文章于 2024-04-22 09:19:44 发布
最新推荐文章于 2024-04-22 09:19:44 发布
阅读量2k 收藏 1
点赞数 1
分类专栏： Uniapp 文章标签： uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44891495/article/details/127766942
版权

问题：
uniapp设置pages的backgroundColor无效，无论设置什么颜色，始终是默认的#fff。
答案：
在这里插入图片描述

backgroundColor 属性只支持部分平台，不支持App，
在App中可通过css来修改页面的背景颜色，

page {
	  background-color: #F5F7FA;
	}

若只设置某个页面的背景颜色就到特定的页面写这个css，
若想设置全局背景颜色，就把这个css写到App.vue文件里

溪ｉ
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue/uni-app 设置（或动态设置）页面背景色超全方法 以及各种可能问题解决（不要比我倒霉）
weixin_44235032的博客
10-21 1万+
关于vue/uni-app修改页面背景色（小程序内）踩坑实录！
activity 获取rootView 设置backGroundColor的方法
01-20
实例如下： View rootView = ((ViewGroup)getWindow()....以上这篇activity 获取rootView 设置backGroundColor的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
uniapp App端页面设置背景色无效的问题及解决办法
我的博客
04-20 5736
解决办法一： style去掉scoped // 修改前 <style lang="scss" scoped> page { background-color: #f5f5f5; } </style> // 修改后 <style lang="scss"> page { background-color: #f5f5f5; } </style> 解决办法二： 为了避免页面的样式影响到其他页面，需要保留scoped。这时可以在另外一个没有scop
uniapp 设置页面背景色
最新发布
fakuangjingling的博客
04-22 1743
【代码】uniapp 设置页面背景色。
破除疑难杂症：Uniapp利用page{}修改页面背景颜色无效的解决方法
ChuanyangChen的博客
10-12 1821
但这一次，死活都改不了，查了网上好多资料，确实是有这种用法的，但我尝试多次却修改背景色无果。做项目的时候，想要修改页面的背景颜色。这样就可以愉快的修改页面背景色啦。
12.关于uniapp小程序设置页面背景色无效的问题及解决方案
endingCode
03-20 4591
1、问题的产生 需求：登录页面根据三种不同的角色，呈现不同的界面，背景色是其中一个元素。 问题：在uniapp中这么设置背景色不管用。（在微信开发者工具中，这样是可以的。） <style scoped> page{ height: 100%; background-color: #007AFF; } </style> 2、解决方法：去掉<style> page{ height: 100%; background-color: #007AFF; }
uni-app 设置 navigationBarBackgroundColor 不生效
辽辽无期的博客
12-22 1188
原因可能以下几种情况。
javascript动态设置样式style实例分析
10-24
在JavaScript中，动态设置样式style是一种常见的操作，它允许开发者在运行时改变元素的外观。通过修改元素的`style`对象，我们可以直接控制CSS样式。下面我们将详细讨论这个主题，并通过实例来分析其中的易错点和...
asp.net 设置GridView的选中行
10-30
它允许开发者以表格形式显示数据，并提供了多种自定义功能，包括设置选中行。本篇文章将详细讲解如何在ASP.NET中设置GridView的选中行，以及处理用户通过键盘导航时的选中行为。 首先，我们要理解GridView的选中行...
JS如何设置元素样式的方法示例
10-19
这是最基本和直接的方法，通过`element.style.property = value`的方式来设置样式。例如： ```javascript var box = document.getElementById("box"); box.style.width = '100px'; box.style.height = '100px'; box....
在uni-app项目中设置背景颜色/微信小程序设置 backgroundColor无效的问题
dandanmei0513的博客
05-07 1015
uniapp设置背景颜色无效
uni-app中全局设置页面背景颜色
laya1211的博客
07-21 8027
在uni-app中设置背景颜色，想象中应该很简单，其实里面也还是有点小坑的，我们来一起看一下
div使用background-color属性失效
YIBOFan
01-15 4787
说一下我遇到的情况以及解决的方案。 我在这个div标签中使用了float属性，所以导致背景颜色属性失效，然后在后面加了一个无用的div标签，css属性加上以下内容，即可。 .clear { clear: both; } ...
QTableView设置selection-background-color不生效
qq_38311163的博客
12-30 1816
解决QTableView设置选中背景色不生效的问题
uni-app小程序和APP给页面page设置背景颜色不起作用的坑
weixin_37391237的博客
05-06 491
uni-app小程序和APP给页面page设置背景颜色不起作用的坑
uniapp 中设置全局页面背景色
YZRHANYU的博客
11-01 6071
uniapp 中设置全局页面背景色
uniapp App端设置状态栏前景色不生效 填坑
qq511821811的博客
06-24 609
步骤一 : 在根目录manifest.json的源码视图修改app-plus的内容,只需要把下面这代码复制到app-plus下。步骤二:在根目录 pages.json 的下全局globalStyle设置导航文字颜色为white 因为前景色设置为light。在官方论坛中 有人使用下面操作可以解决,我测试后也不行 ,定时器也不可.添加后状态栏的字体颜色还是黑色 我设置的背景色 太接近导致看不清。搞完这两步 大功告成。
【uni-app】如何修改uni-app子页面的背景颜色
向着光芒的女孩
03-06 929
项目里面看到已经被在App.vue中设置了背景色全局生效，想修改子页面单独的页面页面背景色，发现没能一下就生效。
uni-app全局配置和页面配置02
weixin_40086938的博客
04-26 315
通过globalStyle进行全局配置 用于设置应用的状态栏、导航条、标题、窗口背景色等 以上是几个常用的属性，附上颜色查询表： http://destiny001.gitee.io/color/ 页面配置重头戏：tabBar tabBar 中的 list 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。 其中 list 接收一个数组，数组中的每个项都是一个对象 来点小把式： 注意h5的使用，tab的icon和icon-active的使用 "pages": [ //pag
uniapp设置tabbar height无效
03-30
要设置uniapp的tabbar高度，可以通过以下步骤： 1. 在App.vue中添加一个全局样式： ```css <style> .uni-tabbar { height: 100px; // 设置你想要的高度 } </style> ``` 2. 在pages.json中设置tabbar的样式： ```json { "tabBar": { "custom": true, "color": "#7A7E83", "selectedColor": "#3cc51f", "backgroundColor": "#ffffff", "list": [ { "pagePath": "pages/index/index", "text": "首页", "iconPath": "/static/tabbar/home.png", "selectedIconPath": "/static/tabbar/home-active.png" }, { "pagePath": "pages/mine/mine", "text": "我的", "iconPath": "/static/tabbar/mine.png", "selectedIconPath": "/static/tabbar/mine-active.png" } ], "position": "bottom", "borderStyle": "white" } } ``` 3. 在每个页面的.vue文件中，将底部的区域留出来，以显示tabbar： ```html <template> <view class="container"> <!-- 这里是页面内容 --> </view> <view class="bottom"></view> </template> <style> .container { height: calc(100% - 100px); // 计算出底部tabbar的高度 } .bottom { height: 100px; // 设置tabbar的高度 } </style> ``` 通过以上步骤设置tabbar高度，应该可以解决uniapp设置tabbar高度无效的问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值