uniapp 04---globalStyle全局外观配置

最新推荐文章于 2025-06-01 14:21:59 发布
原创 最新推荐文章于 2025-06-01 14:21:59 发布 · 1.1w 阅读 · 8 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文详细介绍了小程序中globalStyle的使用方法，包括导航栏的背景颜色、标题颜色、标题文字内容，窗口背景色的设置，以及下拉loading样式和页面触底事件触发距离的调整。

globalStyle全局外观配置

在这里插入图片描述
在这里插入图片描述

navigationBarBackgroundColor:导航栏背景颜色

在这里插入图片描述

在这里插入图片描述
RGB颜色
在这里插入图片描述
在这里插入图片描述
结果为：
在这里插入图片描述

navigationBarTextStyle：导航栏标题颜色

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

navigationBarTitleText：导航标题文字内容

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

窗口的背景色backgroundColor(只有下拉时能够看见)

在这里插入图片描述
只有下拉时能够看见。通过enablePullDownRefresh:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
将背景色改成：
在这里插入图片描述

在这里插入图片描述

backgroundTextStyle:下拉loading的样式，仅支持dark/light

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

onReachBottomDistance:页面上触底事件触发时据页面底部距离，单位只支持px

在这里插入图片描述
在这里插入图片描述

【微信小程序】page.json配置-globalStyle全局样式配置
墨夶的博客
11-15 1409
用于设置应用的状态栏、导航条、标题、窗口背景色等全局样式。这些配置项会在所有页面中生效，除非被页面的局部配置覆盖。以下是: 导航栏背景颜色，如#000000。: 导航栏标题颜色及状态栏前景颜色，仅支持black或white。: 导航栏标题文字内容。: 导航栏样式，仅支持default或custom。custom表示自定义导航栏，只保留右上角胶囊按钮。: 窗口的背景色。: 下拉 loading 的样式，仅支持dark或light。: 是否开启下拉刷新，详见。
你还不会零基础的uniapp吗-uniapp一周实战——第一、二天
尽力漂亮的博客
09-17 3646
uniapp商城实战第一部分项目搭建配置tabbar获取轮播图数据实现轮播图的结构和数据渲染bug：轮播渲染值 相关素材包已经省略…请关注小编（免费给你哦） 第一部分 知识清单（附上视频） 29-创建项目和清理结构及配置基本外观 30-完成底部tabbar的配置 31-获取轮播图的数据 32-封装$myRequest方法并挂载到全局 33-完成首页轮播图的渲染 项目搭建 利用HBuilder X创建基本项目结构 运行项目 整理基本项目结构，并修改窗口外观—— 1.index.vue &
uni-app（3）— globalStyle全局配置和页面配置
tiffany_kim的博客
04-06 5277
此文为uni-app总结笔记（3）— 全局配置和页面配置 【通过globalStyle进行全局配置】 用于设置应用的状态栏、导航条、标题、窗口背景色等。详细文档 常用属性 类型 默认值 描述 navigationBarBackgroundColor HexColor #F7F7F7 导航栏背景颜色（同状态栏背景色） navigationBarTextStyle String white 导航栏标题颜色及状态栏前景颜色，仅支持 black/white navigationBarTit
uniapp 中设置全局页面背景色
YZRHANYU的博客
11-01 8244
uniapp 中设置全局页面背景色
uni-app
m0_56079094的博客
03-14 3737
1-uni-app入门 （1）开发规范： 页面遵循vue单文件 组件标签靠近小程序规范 接口靠近小程序规范 事件处理靠近vue 1.全局配置 globalStyle 在pages.josn文件中进行配置
uni-app pages.json之globalStyle全局页面样式配置
java1234的博客
12-25 2274
uni-app pages.json之globalStyle全局页面样式配置
uniapp globalStyle app-plus titleNView
最新发布
08-29
`globalStyle` 用于全局外观配置，在 `pages.json` 中进行设置。它可以设置应用的导航栏、背景色等通用样式。示例如下： ```json "globalStyle": { "navigationBarTextStyle": "black", "navigationBarTitleText":...
前端框架-小程序uniApp
aming小老弟
12-03 1464
获取集合Collection示例如下。nosql 非关系型数据库。
uni-app【项目搭建，项目运行】
December_shi的博客
06-04 3625
uni-app环境搭建；项目运行；项目如何配置；基本用法
uni-app项目小程序
紫冰的博客
05-21 711
文章目录一、准备工作 一、准备工作 1、创建模板 我们右击文件夹，选择新建，然后选择项目，然后选择我们的uni-app，项目名称需要填写。 这样我们就创建好一个项目的模板了。 项目中创建好的文件大概有： pages文件夹：用来保存我们的页面 static文件夹：用来保存我们的静态资源 app.vue文件：一般用来设置我们的全局样式 main.js文件：我们的vue实例，如果需要挂载全局的方法或属性，就在main中挂载选型上。 manifest.json文件：我们小程序的一些配置 pages.json文件
uniapp 配置 globalStyle
笑望灬星辰
05-06 1826
uniapp 配置 globalStyle // 页面级别的 style 配置可以 覆盖全局的配置 就比如局部变量和全局变量一样 差不多一个意思 "globalStyle": { // 导航栏标题颜色及状态栏前景颜色，仅支持 black/white，其实就是标题的文本颜色 "navigationBarTextStyle": "black", // 标题的文本内容 "navigationBarTitleText": "演示",
uniapp设置全局页面背景色
技术应让更广泛的人群流入到实际产品开发中才是正统
05-03 985
声明手写css的重要性,因为微信小程序之类的他自带默认的颜色值,你想覆盖就得声明你写的代码更具优先级。
【uni-app】设置背景颜色相关
cc蒲公英的博客
11-16 6205
【uni-app】设置背景颜色相关
uni-app中全局设置页面背景颜色
laya1211的博客
07-21 1万+
在uni-app中设置背景颜色，想象中应该很简单，其实里面也还是有点小坑的，我们来一起看一下
Uni-app笔记 项目框架介绍 全局样式globalStyle
u013470619的博客
09-18 1123
1、框架内文件介绍 pages文件夹->存放项目中所有页面文件 static文件夹->存放资源文件 比如图片 unpackage->打包完成的文件存放位置，比如打包为h5或安卓app APP.vue是项目的入口文件，可以调用应用的生命周期。 main.js是项目的入口文件，项目开始会首先加载main.js manifest.json是配置文件，你可以在这个文件中配置各种小程序的相关内容 pages.json是用于设置项目文件的存放路径和全局样式等功能的 uni.css是一些
uni-app学习笔记十九--pages.json全局样式globalStyle设置
shenxiaomo1688的博客
06-01 964
1.navigationBarTextStyle：导航栏标题颜色及状态栏前景颜色，仅支持 black/white，默认为black;文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。5.backgroundTextStyle:下拉 loading 的样式，仅支持 dark / light；globalStyle用于设置应用的状态栏、导航条、标题、窗口背景色等。的内容，在uni-app中是在manifest中配置。注意定位权限申请等原属于。
uni-app设置全局属性globalStyle
热门推荐
star_of_science的博客
08-03 1万+
uni-app修炼之路（五） 参考官方文档：https://uniapp.dcloud.io/collocation/pages 应用的状态栏、导航条、标题、窗口背景色等这些公共的样式一般情况下都会写在globalStyle里面。这样页面就无需进行单独的配置了。 属性 类型 默认值 描述 平台差异说明 navigationBarBackgroundColor HexColor #F7F7F7 导航栏背景颜色（同状态栏背景色） APP与H5为#F7F7F7，小程序平台请参考相应小程序文档
uni-app 学习之旅1.0globalStyle全局配置
I_like_garlic的博客
05-06 308
uni-app globalStyle全局配置 { "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages { "path": "pages/index/index", "style": { } } ], "globalStyle": { ...
uniapp 设置全局样式统一每个页面的背景颜色
树上骑个猴的博客
03-10 4731
1.设置全局样式可以在App.vue里面 2.在每个页面的根view 里添加一个class名叫page
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值