uniapp配置全局样式

旧城等待， 2024-03-31 09:08 129阅读 0赞

**简介**：本文讲解如何使用uniapp配置全局样式，和其中的优先级问题。  
![在这里插入图片描述][1a44d03c932b4c818d4a29c49da37680.png]

"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
    		{
        
    			"path": "pages/index/index", 
    			"style": {
        
    				"navigationBarTitleText": "新闻" // 上方栏标题名字
    			}
    		}
    	    ,{
        
                "path" : "pages/user/user",
                "style" :                                                                                    
                {
        
                    "navigationBarTitleText": "个人中心",
                    "enablePullDownRefresh": false // 是否支持下拉刷新
                }
                
            }
        ],
    	// 全体样式的优先级，是低于具体样式pages中的属性的
    	"globalStyle": {
         // 设置全体样式 
    		"navigationBarTextStyle": "white", // 上方栏的文字颜色
    		"navigationBarTitleText": "新闻", // 上方栏的标题文字
    		"navigationBarBackgroundColor": "#31C27C", // 上方栏的背景颜色
    		"backgroundColor": "#F8F8F8" // 背景颜色
    	}

**运行结果**：  
![在这里插入图片描述][c3641f73e48d479cb732287fb24070bb.png]

[1a44d03c932b4c818d4a29c49da37680.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/d4eda7df43fa4cccb8cc258d10cb3c4c.png
[c3641f73e48d479cb732287fb24070bb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/1d4f77c8b1e2406d8f6a19bbcd21c5b0.png

发表评论取消回复

表情：

评论列表（有 0 条评论，129人围观）

还没有评论，来说两句吧...

相关阅读

相关 uniapp配置全局样式

简介：本文讲解如何使用uniapp配置全局样式，和其中的优先级问题。 ![在这里插入图片描述][1a44d03c932b4c818d4a29c49da37680.png]

旧城等待，/ 2024年03月31日 09:08/ 0 赞/ 130 阅读

相关 uniapp 样式无法实现

尝试去掉style标签所有内容样式没变表明括号前面的class名写错了 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_t

青旅半醒/ 2023年02月28日 09:00/ 0 赞/ 36 阅读

相关 uniapp全局引入字体

uniapp引入各种字体一.下载字体 ![在这里插入图片描述][20210115093344326.png] 二.在全局设置字体在font-face中说明，

喜欢ヅ旅行/ 2023年01月07日 01:26/ 0 赞/ 269 阅读

相关 CSS全局样式：

@charset "utf-8"; { margin:0; padding:0; } html body { ov

不念不忘少年蓝@/ 2022年12月28日 01:46/ 0 赞/ 197 阅读

相关 6.uniapp中App.vue是全局样式可以在子组件调用

/ App.vue全局样式在这里面设置样式 uni-style.vue中的style: 具有相同名称的 .box1 的选择器可以调用并且使用 / /

￡神魔★判官ぃ/ 2022年11月17日 13:45/ 0 赞/ 237 阅读

相关 uniapp mixin全局混入

/ 全局混入型 / module.exports = { beforeCreate() { },

你的名字/ 2022年09月07日 12:16/ 0 赞/ 290 阅读

相关 uniapp 配置全局scss/less/sass变量

uniapp 配置全局scss/less/sass变量根目录新建 `vue.config.js`文件 vue.config.js module.exports

╰半橙微兮°/ 2021年08月31日 12:37/ 0 赞/ 2585 阅读

相关 uniapp - uniapp 中的样式使用

uniapp 中的样式使用一. 尺寸单位二. 样式导入三. 内联样式四. 选择器五. 全局样式与局部样式 > 在 uni-app

╰+哭是因爲堅強的太久メ/ 2021年07月26日 02:42/ 0 赞/ 962 阅读

相关 uniapp——globalStyle全局外观配置

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

刺骨的言语ヽ痛彻心扉/ 2021年07月25日 19:26/ 0 赞/ 562 阅读

相关 uniapp 全局外观配置pages.json的globalStyle

"navigationBarTextStyle": "black", 只支持黑/白 "navigationBarTitleText": "uni-app

绝地灬酷狼/ 2021年07月24日 18:03/ 0 赞/ 477 阅读