欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 文旅 > 艺术 > uni-app学习笔记十九--pages.json全局样式globalStyle设置

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

2025/6/6 18:26:08 来源:https://blog.csdn.net/shenxiaomo1688/article/details/148365990  浏览:    关键词:uni-app学习笔记十九--pages.json全局样式globalStyle设置

pages.json 页面路由

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

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

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

page.json配置项列表

属性类型必填描述平台兼容
globalStyleObject设置默认页面的窗口表现
pagesObject Array设置页面路径及窗口表现
easycomObject组件自动引入规则2.5.5+
tabBarObject设置底部 tab 的表现
conditionObject启动模式配置
subPackagesObject Array分包加载配置H5 不支持
preloadRuleObject分包预下载规则微信小程序
workersStringWorker 代码放置的目录微信小程序
leftWindowObject大屏左侧窗口H5
topWindowObject大屏顶部窗口H5
rightWindowObject大屏右侧窗口H5
uniIdRouterObject自动跳转相关配置,新增于HBuilderX 3.5.0
entryPagePathString默认启动首页,新增于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官网

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

热搜词