Uniapp设置pages的backgroundColor无效

最新推荐文章于 2024-04-22 09:19:44 发布
最新推荐文章于 2024-04-22 09:19:44 发布
阅读量1.9k 收藏 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().getDecorView().findViewById(android.R.id.content)).getChildAt(0); rootView.setBackgroundColor(Color.WHITE); 以上这篇activity 获取rootView 设置backGroundColor的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
backgroundcolor-changer
05-31
创建 React 应用程序入门 这个项目是用引导的。 可用脚本 在项目目录中，您可以运行： yarn start 在开发模式下运行应用程序。 打开在浏览器中查看。 如果您进行编辑，页面将重新加载。 您还将在控制台中看到任何 lint 错误。 yarn test 在交互式观察模式下启动测试运行器。 有关更多信息，请参见关于的部分。 yarn build 将用于生产的应用程序构建到build文件夹。 它在生产模式下正确地捆绑了 React 并优化了构建以获得最佳性能。 构建被缩小，文件名包括哈希值。 您的应用程序已准备好部署！ 有关更多信息，请参阅有关的部分。 yarn eject 注意：这是一种单向操作。 一旦eject ，就回不去了！ 如果您对构建工具和配置选择不满意，则可以随时eject 。 此命令将从您的项目中删除单个构建依赖项。 相反，它会将所有配置文件和可传递依赖
uniapp 设置页面背景色
最新发布
fakuangjingling的博客
04-22 1265
【代码】uniapp 设置页面背景色。
change_backgroundcolor
03-02
change_backgroundcolor
UIButton-BackgroundColor:UIButton的类别或扩展名，用于将纯背景色设置为背景图像
05-19
UIButton + BackgroundColor UIButton的类别或扩展名，用于将纯背景色设置为背景图像。 安装 可可豆 将此添加到您的Podfile pod 'UIButton+BackgroundColor' 用法 导入<UIButton> ，然后可以使用以下命令为您的UIButton设置带有状态的背景色： [ self .blueButton setBackgroundColor: [UIColor blueColor ] forState: UIControlStateNormal]; 您还可以设置UIButton背景色默认外观 [[UIButton appearance ] setBackgroundColor: [UIColor blueColor ] forState: UIControlStateNormal]; 接触
uniapp 关于uniapp改变页面背景色问题
weixin_45610757的博客
01-14 643
uniapp在pages.json 里面配置背景色没有效果，所以在页面进行添加 使用两个style进行修改背景色
uniapp App端页面设置背景色无效的问题及解决办法
我的博客
04-20 5622
解决办法一： style去掉scoped // 修改前 <style lang="scss" scoped> page { background-color: #f5f5f5; } </style> // 修改后 <style lang="scss"> page { background-color: #f5f5f5; } </style> 解决办法二： 为了避免页面的样式影响到其他页面，需要保留scoped。这时可以在另外一个没有scop
破除疑难杂症：Uniapp利用page{}修改页面背景颜色无效的解决方法
ChuanyangChen的博客
10-12 1799
但这一次，死活都改不了，查了网上好多资料，确实是有这种用法的，但我尝试多次却修改背景色无果。做项目的时候，想要修改页面的背景颜色。这样就可以愉快的修改页面背景色啦。
12.关于uniapp小程序设置页面背景色无效的问题及解决方案
endingCode
03-20 4559
1、问题的产生 需求：登录页面根据三种不同的角色，呈现不同的界面，背景色是其中一个元素。 问题：在uniapp中这么设置背景色不管用。（在微信开发者工具中，这样是可以的。） <style scoped> page{ height: 100%; background-color: #007AFF; } </style> 2、解决方法：去掉<style> page{ height: 100%; background-color: #007AFF; }
uni-app 设置 navigationBarBackgroundColor 不生效
辽辽无期的博客
12-22 1100
原因可能以下几种情况。
uniapp pages.json文件配置
WJLSH123的博客
04-19 2051
{ "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages { "path": "pages/index/index", "style": { "navigationBarTitleText": "九聚财务", "navigationStyle": "custom", // 自定义头部导航栏 "enablePullDownRe
微信小程序app.json设置导航栏背景颜色（navigationBarBackgroundColor）无效问题定位过程
听海边涛声
03-31 530
微信小程序app.json设置导航栏背景颜色（navigationBarBackgroundColor）无效问题定位过程
微信小程序设置页面背景颜色backgroundColor 无效的问题！
前端很杂，故名前端杂货铺 —— coderkey
08-20 6138
（1）原因： 当我们在微信小程序 json 中设置 backgroundColor 时，实际在电脑的模拟器中根本看不到效果。 （2）分析： 这是因为 backgroundColor 指的窗体背景颜色，而不是页面的背景颜色，即窗体下拉刷新或上拉加载时露出的背景。在电脑的模拟器中是看不到这个动作的，所以会让人误以为这个配置是无效的。 （3）解决方案： 如果要设置页面背景颜色，得在 wxss 文件中自定义样式，如下： // .wxss page { background-color: #ededed; }
uni-app系列（三）：uni-app导航栏设置，在pages.json里面配置
Mr_chen的博客
09-04 4789
????摘要 今天分享下 —— uni-app 导航栏设置，在 pages.json 里面配置 的一些基本知识，欢迎关注！ ????分享 全局导航栏样式设置： 在 pages.json 的 globalStyle 里进行各个参数配置 "globalStyle": { "navigationBarTextStyle": "black", "navigationBarTitleText": "Hello uniapp", "navigationBarBackgroundColor
在uni-app项目中设置背景颜色/微信小程序设置 backgroundColor无效的问题
dandanmei0513的博客
05-07 1004
uniapp设置背景颜色无效
div使用background-color属性失效
YIBOFan
01-15 4758
说一下我遇到的情况以及解决的方案。 我在这个div标签中使用了float属性，所以导致背景颜色属性失效，然后在后面加了一个无用的div标签，css属性加上以下内容，即可。 .clear { clear: both; } ...
QTableView设置selection-background-color不生效
qq_38311163的博客
12-30 1768
解决QTableView设置选中背景色不生效的问题
uni-app小程序和APP给页面page设置背景颜色不起作用的坑
weixin_37391237的博客
05-06 482
uni-app小程序和APP给页面page设置背景颜色不起作用的坑
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、付费专栏及课程。

余额充值