uni-app学习笔记十九--pages.json全局样式globalStyle设置

pages.json 页面路由

pages.json 文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。

导航栏高度为 44px (不含状态栏)，tabBar 高度为 50px (不含安全区)。

它类似微信小程序中app.json的页面管理部分。注意定位权限申请等原属于app.json的内容，在uni-app中是在manifest中配置。

page.json配置项列表

属性	类型	必填	描述	平台兼容
globalStyle	Object	否	设置默认页面的窗口表现
pages	Object Array	是	设置页面路径及窗口表现
easycom	Object	否	组件自动引入规则	2.5.5+
tabBar	Object	否	设置底部 tab 的表现
condition	Object	否	启动模式配置
subPackages	Object Array	否	分包加载配置	H5 不支持
preloadRule	Object	否	分包预下载规则	微信小程序
workers	String	否	Worker 代码放置的目录	微信小程序
leftWindow	Object	否	大屏左侧窗口	H5
topWindow	Object	否	大屏顶部窗口	H5
rightWindow	Object	否	大屏右侧窗口	H5
uniIdRouter	Object	否	自动跳转相关配置，新增于HBuilderX 3.5.0
entryPagePath	String	否	默认启动首页，新增于HBuilderX 3.7.0	微信小程序、支付宝小程序

本篇先来学习 globalStyle

globalStyle用于设置应用的状态栏、导航条、标题、窗口背景色等。下面介绍下它几个常用的属性配置(PS:不同的小程序，配置属性会略有差异，详情请查看官方文档)：

1.navigationBarTextStyle：导航栏标题颜色及状态栏前景颜色，仅支持 black/white，默认为black; 

2.navigationBarTitleText:导航栏标题文字内容; 

3.navigationBarBackgroundColor:导航栏背景颜色（同状态栏背景色）; 

4.backgroundColor:下拉显示出来的窗口的背景色; 

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

6.enablePullDownRefresh：是否开启下拉刷新；

7.onReachBottomDistance：页面上拉触底事件触发时距页面底部距离，单位只支持px。

页面上拉触底事件的使用：

<script setup>import {onReachBottom} from "@dcloudio/uni-app"onReachBottom(()=>{console.log("触底加载...")})
</script>

更多信息， 官方文档详见pages.json 页面路由 | uni-app官网