快捷導(dǎo)航

uniapp中設(shè)置全局頁(yè)面背景色的簡(jiǎn)單教程

更新時(shí)間：2023年03月31日 10:11:22 作者：YZRHANYU

uni-app如何設(shè)置頁(yè)面全局背景色,其實(shí)非常簡(jiǎn)單,一句話即可,但有時(shí)候也會(huì)踩一些坑,這篇文章主要給大家介紹了關(guān)于uniapp中設(shè)置全局頁(yè)面背景色的相關(guān)資料,需要的朋友可以參考下

未生效 :

在pages.json里面設(shè)置單頁(yè)面背景色,這種是不行的,只能在頁(yè)面內(nèi)生效

方法1: pages.json globalStyle 中設(shè)置 backgroundColor

// pages.json
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "衡物聯(lián)",
		"navigationBarBackgroundColor": "#ffffff",
		"backgroundColor": "red" // 這里嘗試設(shè)置全局頁(yè)面背景色,未生效
	},

方法2: pages.json globalStyle 中設(shè)置 backgroundColor ,猜測(cè)可能是顏色不能用別名

// pages.json
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "衡物聯(lián)",
		"navigationBarBackgroundColor": "#ffffff",
		"backgroundColor": "#4094ff" // 這里嘗試設(shè)置全局頁(yè)面背景色,未生效
	},

方法3 : 在App.vue里面設(shè)置,在各個(gè)頁(yè)面使用

1.在App.vue里面

2.在每個(gè)頁(yè)面的根view 里添加一個(gè)class名叫page

效果是不 OK 的,不設(shè)置寬高的情況下,不是整個(gè)頁(yè)面的背景色

生效

方法1:在App.vue的style樣式表中設(shè)置

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

這次生效了,而且是不用在每個(gè)頁(yè)面中引用的

注意這里需要是 page 而不是 .page

總結(jié)

到此這篇關(guān)于uniapp中設(shè)置全局頁(yè)面背景色的文章就介紹到這了,更多相關(guān)uniapp設(shè)置全局頁(yè)面背景色內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

Vue3?中的??shallowReactive?詳解
本文深入探討了Vue3中新特性shallowReactive的使用和原理,shallowReactive是創(chuàng)建淺響應(yīng)式對(duì)象的API,只對(duì)對(duì)象的第一層屬性進(jìn)行響應(yīng)式轉(zhuǎn)換,不對(duì)嵌套對(duì)象處理,有助于性能優(yōu)化和狀態(tài)管理,同時(shí)也指出了shallowReactive在使用中的注意事項(xiàng)
2024-10-10
vue使用echarts實(shí)現(xiàn)三維圖表繪制
這篇文章主要為大家詳細(xì)介紹了vue如何在項(xiàng)目中使用echarts實(shí)現(xiàn)三維圖表的繪制,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以參考一下
2023-08-08
詳解Vue中的watch和computed
這篇文章主要介紹了Vue中的watch和computed的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)vue框架，感興趣的朋友可以了解下
2020-11-11
Vue引入jquery實(shí)現(xiàn)平滑滾動(dòng)到指定位置
這篇文章主要介紹了Vue引入jquery實(shí)現(xiàn)平滑滾動(dòng)到指定位置的效果，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧
2018-05-05
vue router路由嵌套不顯示問(wèn)題的解決方法
這篇文章主要為大家詳細(xì)介紹了vue router路由嵌套不顯示的問(wèn)題，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下vue-router 路由嵌套不顯示問(wèn)題
2017-06-06
Vue keepalive學(xué)習(xí)用法及場(chǎng)景分析
在Vue中,<keep-alive>的include屬性用于指定需要緩存的組件,本文給大家介紹Vue keepalive學(xué)習(xí)用法及場(chǎng)景分析,感興趣的朋友一起看看吧
2025-03-03
vue 注冊(cè)組件的使用詳解
Vue.js的組件的使用有3個(gè)步驟：創(chuàng)建組件構(gòu)造器、注冊(cè)組件和使用組件。這篇文章主要介紹了vue 注冊(cè)組件的使用,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下
2018-05-05
在vue中安裝使用vux的教程詳解
這篇文章主要介紹了在vue中安裝使用vux的教程，本文給大家記錄了vuex的安裝使用過(guò)程，非常不錯(cuò)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下
2018-09-09
vue實(shí)現(xiàn)調(diào)取手機(jī)攝像頭和相冊(cè)功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)調(diào)取手機(jī)攝像頭和相冊(cè)功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-09-09
element-plus結(jié)合sortablejs實(shí)現(xiàn)table行拖拽效果
使用element-plus的el-table組件創(chuàng)建出來(lái)的table,結(jié)合sortable.js實(shí)現(xiàn)table行拖動(dòng)排序,文中有詳細(xì)的代碼示例供大家參考,具有一定的參考價(jià)值,感興趣的同學(xué)可以自己動(dòng)手試一試
2023-10-10