当前位置: 首页 > article >正文

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官网

http://www.lryc.cn/news/2399099.html

相关文章:

  • BUUCTF[极客大挑战 2019]Havefun 1题解
  • 【基础】Unity中Camera组件知识点
  • Tomcat优化篇
  • Temporal Fusion Transformer(TFT)扩散模型时间序列预测模型
  • 【LangServe部署流程】5 分钟部署你的 AI 服务
  • 攻防世界-unseping
  • 微软推出 Bing Video Creator,免费助力用户轻松创作 AI 视频
  • (13)java+ selenium->元素定位大法之By_partial_link_text
  • Xget 正式发布:您的高性能、安全下载加速工具!
  • [yolov11改进系列]基于yolov11使用FasterNet替换backbone用于轻量化网络的python源码+训练源码
  • 一周学会Pandas2之Python数据处理与分析-Pandas2数据绘图与可视化
  • 企业级安全实践:SSL/TLS 加密与权限管理(一)
  • 2025——》VSCode Windows 最新安装指南/VSCode安装完成后如何验证是否成功?2025最新VSCode安装配置全攻略
  • RabbitMQ如何保证消息可靠性
  • 【MATLAB代码】制导——三点法,二维平面下的例程|运动目标制导,附完整源代码
  • Spring Security用户管理机制详解
  • 如何爬取google应用商店的应用分类呢?
  • SQL Relational Algebra(数据库关系代数)
  • 如何安装huaweicloud-sdk-core-3.1.142.jar到本地仓库?
  • Electron桌面应用下,在拍照、展示pdf等模块时,容易导致应用白屏
  • 智能工业时代:工业场景下的 AI 大模型体系架构与应用探索
  • 【git stash切换】
  • React 18 生命周期详解与并发模式下的变化
  • 易语言使用OCR
  • C++和C#界面开发方式的全面对比
  • 监控 100 台服务器磁盘内存CPU利用率
  • Linux远程连接主机——ssh命令详解
  • 算法-集合的使用
  • 性能优化 - 理论篇:CPU、内存、I/O诊断手段
  • 算法:二分查找