uniapp中設(shè)置全局頁面背景色的簡單教程
更新時間：2023年03月31日 10:11:22 作者：YZRHANYU
uni-app如何設(shè)置頁面全局背景色,其實非常簡單,一句話即可,但有時候也會踩一些坑,這篇文章主要給大家介紹了關(guān)于uniapp中設(shè)置全局頁面背景色的相關(guān)資料,需要的朋友可以參考下
未生效 :
在pages.json里面設(shè)置單頁面背景色,這種是不行的,只能在頁面內(nèi)生效
方法1: pages.json globalStyle 中設(shè)置 backgroundColor
// pages.json
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "衡物聯(lián)",
"navigationBarBackgroundColor": "#ffffff",
"backgroundColor": "red" // 這里嘗試設(shè)置全局頁面背景色,未生效
},
方法2: pages.json globalStyle 中設(shè)置 backgroundColor ,猜測可能是顏色不能用別名
// pages.json
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "衡物聯(lián)",
"navigationBarBackgroundColor": "#ffffff",
"backgroundColor": "#4094ff" // 這里嘗試設(shè)置全局頁面背景色,未生效
},
方法3 : 在App.vue里面 設(shè)置,在各個頁面使用
1.在App.vue里面
2.在每個頁面的根view 里添加一個class名叫page
效果是不 OK 的,不設(shè)置寬高的情況下,不是整個頁面的背景色
生效
方法1:在App.vue的style樣式表中設(shè)置
<style>
page {
background-color: #F0AD4E;
}
</style>這次生效了,而且是不用在每個頁面中引用的
注意這里需要是 page 而不是 .page
總結(jié)
到此這篇關(guān)于uniapp中設(shè)置全局頁面背景色的文章就介紹到這了,更多相關(guān)uniapp設(shè)置全局頁面背景色內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本文深入探討了Vue3中新特性shallowReactive的使用和原理,shallowReactive是創(chuàng)建淺響應(yīng)式對象的API,只對對象的第一層屬性進行響應(yīng)式轉(zhuǎn)換,不對嵌套對象處理,有助于性能優(yōu)化和狀態(tài)管理,同時也指出了shallowReactive在使用中的注意事項2024-10-10
這篇文章主要為大家詳細介紹了vue如何在項目中使用echarts實現(xiàn)三維圖表的繪制,文中的示例代碼講解詳細,感興趣的小伙伴可以參考一下2023-08-08
這篇文章主要介紹了Vue中的watch和computed的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)vue框架，感興趣的朋友可以了解下2020-11-11
這篇文章主要介紹了Vue引入jquery實現(xiàn)平滑滾動到指定位置的效果，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧2018-05-05
這篇文章主要為大家詳細介紹了vue router路由嵌套不顯示的問題，具有一定的參考價值，感興趣的小伙伴們可以參考一下vue-router 路由嵌套不顯示問題2017-06-06
Vue keepalive學(xué)習(xí)用法及場景分析
在Vue中,<keep-alive>的include屬性用于指定需要緩存的組件,本文給大家介紹Vue keepalive學(xué)習(xí)用法及場景分析,感興趣的朋友一起看看吧2025-03-03
Vue.js的組件的使用有3個步驟：創(chuàng)建組件構(gòu)造器、注冊組件和使用組件。這篇文章主要介紹了vue 注冊組件的使用,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2018-05-05
這篇文章主要介紹了在vue中安裝使用vux的教程，本文給大家記錄了vuex的安裝使用過程，非常不錯，具有一定的參考借鑒價值 ,需要的朋友可以參考下2018-09-09
這篇文章主要為大家詳細介紹了vue實現(xiàn)調(diào)取手機攝像頭和相冊功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
element-plus結(jié)合sortablejs實現(xiàn)table行拖拽效果
使用element-plus的el-table組件創(chuàng)建出來的table,結(jié)合sortable.js實現(xiàn)table行拖動排序,文中有詳細的代碼示例供大家參考,具有一定的參考價值,感興趣的同學(xué)可以自己動手試一試2023-10-10