uni-app修改页面背景色:

这篇具有很好参考价值的文章主要介绍了uni-app修改页面背景色:。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1.设置全局背景色(法一):

uniapp设置背景颜色,小程序端,uni-app,前端,vue.js

"globalStyle": {
	"navigationBarTextStyle": "black",
	"navigationBarTitleText": "...管理",
	// "navigationBarTitleText": "...管理",
	"navigationBarBackgroundColor": "#F8F8F8",
	"backgroundColor": "#F8F8F8"
},
2.设置全局背景色(法二):

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

<style>	
page {
	background-color: #F0AD4E;
}
</style>
3.设置单页面背景色:
对应页面中的style样式表中设置,且不能有scoped属性,如果需要使用带scoped属性的样式表,则重新创建一个样式表单独写背景色样式

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

<style lang="scss" scoped>
	....
</style>
4.在pages.json里面设置单页面背景色,这种是不行的,只能在页面内设置:

uniapp设置背景颜色,小程序端,uni-app,前端,vue.js

这种是不行的,只能在页面内设置

uniapp设置背景颜色,小程序端,uni-app,前端,vue.js文章来源地址https://www.toymoban.com/news/detail-605743.html

到了这里,关于uni-app修改页面背景色:的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【UniApp】-uni-app-项目实战页面布局(苹果计算器)

    经过前面的文章介绍,基本上 UniApp 的内容就介绍完毕了 那么从本文开始,我们就开始进行一个项目的实战 这次做的项目是苹果计算器,这个项目的难度不是很大,但是也不是很简单,适合练手 打开 HBuilderX,点击左上角 文件 - 新建 - 项目 : 项目创建完毕之后,首先来分析

    2024年02月04日
    浏览(36)
  • uni-app 实现navigateBack返回修改前一页面数据(H5、APP、小程序)

    先自我介绍一下,小编浙江大学毕业,去过华为、字节跳动等大厂,目前阿里P7 深知大多数程序员,想要提升技能,往往是自己摸索成长,但自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前! 因此收集整理了一份《2024年最新Web前端全套学习资料》,

    2024年04月29日
    浏览(41)
  • office实操技能01:修改微软Office页面的(非背景的)浅绿底色、设置默认字体和主题颜色、取消页眉横线、PPT默认的等线字体

    目录 1 处理word中默认中文字体是等线的问题 2 处理word中没有设置背景色,但页面底色是浅绿色的问题 3 修改office的主题颜色  4 删除页眉横线 5 处理PPT中的等线字体 这篇博文主要介绍两个使用技能: 技能1:修改word的默认等线字体 技能2:修改页面的非设置的背景色的浅绿底

    2023年04月23日
    浏览(48)
  • Vue/Uni-app/微信小程序 v-if 设置出场/退出动画(页面交互不死板,看起来更流畅)

    天梦星服务平台 (tmxkj.top) https://tmxkj.top/#/ 在Vue.js中,使用 v-if 进行条件渲染时设置动画可以通过 transition 组件来实现。 具体操作步骤如下: 包裹条件渲染的元素 :您需要将要通过 v-if 控制显示隐藏的元素包裹在 transition 标签内。 命名过渡效果 :给 transition 标签添加 name 属

    2024年04月28日
    浏览(25)
  • uni-app 中使用背景图片

    uni-app 中使用背景图片 一 : H5 上使用(但是在微信小程序中报错) 二 : 微信小程序中可以 1,使用网络图片(对不同环境需要不同配置), 2,或者 base64(需要本地转换), 3,或者使用标签(推荐使用)

    2024年02月16日
    浏览(39)
  • uni-app 头部导航条改为背景图

    将某一页面的导航条,改为背景图 1.在pages.json文件中将要修改的页面,style中的“navigationStyle”设置为custom,取消默认的原生导航栏 2.在要修改的页面中如index1页面 效果如图   苹果手机导航条文字在中间位置,安卓手机导航条问题在靠左位置,更改某一页面,将会与其他页

    2024年02月11日
    浏览(39)
  • 【uni-app】uni-app实现聊天页面功能——功能篇(上)

    上一篇讲到了如何布局,这一篇将讲一下如何用uni-app实现小程序聊天页面的最主要的功能——发消息后页面滚动到最底部(参考过很多文章最后找到比较适合的方法)。 其他的功能(参考微信),之后的文章会讲述到具体实现方法 点击聊天框的时候,聊天框随键盘抬起且聊

    2024年02月11日
    浏览(44)
  • 【uni-app】uni-app实现聊天页面功能(小程序)——布局篇

    在工作中使用uni-app参与开发一个小程序,其中要写一个简单的聊天页面,虽然功能不多(只有一个发送文字的功能),但是其中的细节比较多,也踩过很多坑,特此记录下来。要实现的页面如图所示,该篇主要讲讲如何布局(参考了很多文章之后根据页面需求进行一个整合)

    2024年02月05日
    浏览(46)
  • Qt配置设置,修改全文字体大小颜色,背景颜色

    这是完成时的demo,选择所需。 点击确认修改,全局修改,效果第二张图。 在没有点击确认修改时,字体等按钮的改变只会在文本框里面体现出来。点击确认才会修改全局的东西。点击恢复默认时,字体字号颜色控件全部恢复初始状态,当点击确认修改,全局才会改为初始状

    2024年02月11日
    浏览(34)
  • uniapp系列-超详细教你在uni-app+vue3里通过web-view组件传递信息打开H5页面写入localstorage并解决兼容性

    web-view 是一个 web 浏览器组件,可以用来承载网页的容器,会自动铺满整个页面(nvue 使用需要手动指定宽高)。 点击这里直达官网文档 点击这里下载我的代码demo 本文最下面还有一些 常见或者奇怪问题解决方案 哦~ 之前开发好的H5页面,不想重新开发,想要直接放进项目用

    2024年02月09日
    浏览(35)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包