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。

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

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

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

相关推荐
我的xiaodoujiao2 分钟前
API 接口自动化测试详细图文教程学习系列32--Allure测试报告2
python·学习·测试工具·pytest
破碎的南瓜1 小时前
sqli--sql注入过关笔记(1,2,3,4,5,9)
数据库·笔记·sql
你想知道什么?2 小时前
线性回归-学习笔记
笔记·学习·线性回归
鱼毓屿御2 小时前
从「只会聊」到「边想边做」的跃迁
前端·学习·react.js
谙弆悕博士2 小时前
系统集成项目管理工程师教程(第3版)笔记——第17章:法律法规和标准规范
笔记·职场和发展·学习方法·业界资讯·软考·法律·法规
AOwhisky3 小时前
Python 学习笔记(第十五期)——运维自动化(下·后篇):堡垒机实战——paramiko高阶篇
运维·python·学习·云原生·自动化·运维开发
谙弆悕博士4 小时前
系统集成项目管理工程师教程(第3版)笔记——第4章:信息系统架构
笔记·系统架构·项目管理·创业创新·学习方法·业界资讯·物理
minglie15 小时前
zynq中linux系统的自动登录和免密登录
学习
茯苓gao5 小时前
嵌入式开发笔记:Qt信号槽机制深度解析——从原理到实战的全方位指南
开发语言·笔记·嵌入式硬件·qt·学习
我想我不够好。6 小时前
监控学习 7.23 1.5hour
学习