uniapp配置全局样式

旧城等待， 2024-03-31 09:08 91阅读 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 条评论，91人围观）

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

相关阅读

相关 uniapp配置全局样式

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

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

相关 uniapp全局引入字体

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

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

相关 CSS全局样式：

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

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

相关 vue+uniapp：全局组件（easycom）

一、创建组件 [https://my.oschina.net/u/4397787/blog/3309273][https_my.oschina.net_u_439

「爱情、让人受尽委屈。」/ 2022年11月15日 15:46/ 0 赞/ 215 阅读

相关 uniapp mixin全局混入

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

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

相关 css全局样式表

/\==全局样式==\/ \\{padding:0;margin:0;\} div,dl,dt,dd,form,h1,h2,h3,h4,h5,h6,img,ol,ul,

短命女/ 2022年06月12日 10:25/ 0 赞/ 287 阅读

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

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

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

相关 uniapp - uniapp 中的样式使用

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

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

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

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

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

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

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

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