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

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.xdnf.cn/news/10360.html

相关文章:

  • Langchaine4j 流式输出 (6)
  • NodeJS全栈开发面试题讲解——P2Express / Nest 后端开发
  • B站视频下载器 v1.0.4|免登录下载1080P视频
  • Global Security Markets 第5章知识点总结
  • 字节面试手撕题:版本号排序
  • ReLU的变体
  • 基于ZYNQ ARM+FPGA异构平台的声呐数据采集系统设计
  • Amazon Augmented AI:人类智慧与AI协作,破解机器学习审核难题
  • 【配置vscode默认终端为git bash】
  • ArcGIS Pro 创建渔网格网过大,只有几个格网的解决方案
  • (面试)OkHttp实现原理
  • AWS之迁移与传输服务
  • Java八股文智能体——Agent提示词(Prompt)
  • linux 后记
  • [总结]前端性能指标分析、性能监控与分析、Lighthouse性能评分分析
  • 如何用docker部署ELK?
  • vue笔记-路由
  • Java抽象工厂模式详解
  • 【STM32F1标准库】理论——定时器/计数器中断
  • CMake指令:add_executable
  • 79. Word Search
  • flask pyinstaller打包exe,出现module not found问题
  • 论文阅读(六)Open Set Video HOI detection from Action-centric Chain-of-Look Prompting
  • 终结电源反接与压降损耗:理想二极管控制器深度解析
  • 4、数据标注的武林秘籍:Label-Studio vs CVAT vs Roboflow
  • Java求职者面试题详解:Spring、Spring Boot、MyBatis技术栈
  • unix/linux source 命令,其发展历程详细时间线、由来、历史背景
  • 宝塔专属清理区域,宝塔清理MySQL日志(高效释放空间)
  • 基于SpringBoot+Redis实现RabbitMQ幂等性设计,解决MQ重复消费问题
  • Amazon GameLift实战指南:低成本构建高并发全球游戏服务器架构