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.pswp.cn/diannao/85669.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

SQL思路解析:窗口滑动的应用

目录 &#x1f3af; 问题目标 第一步&#xff1a;从数据中我们能直接得到什么&#xff1f; 第二步&#xff1a;我们想要的“7天窗口”长什么样&#xff1f; 第三步&#xff1a;SQL 怎么表达“某一天的前六天”&#xff1f; &#x1f50d;JOIN 比窗口函数更灵活 第四步&am…

解决MyBatis参数绑定中参数名不一致导致的错误问题

前言 作为一名Java开发者&#xff0c;我在实际项目中曾多次遇到MyBatis参数绑定的问题。其中最常见的一种情况是&#xff1a;在Mapper接口中定义的参数名与XML映射文件中的占位符名称不一致&#xff0c;导致运行时抛出Parameter xxx not found类异常。这类问题看似简单&#x…

黑马程序员TypeScript课程笔记—类型兼容性篇

类型兼容性的说明 因为传入的时候只有一个参数 对象之间的类型兼容性 接口之间的类型兼容性 函数之间的类型兼容性&#xff08;函数参数个数&#xff09; 和对象的兼容性正好相反 函数之间的类型兼容性&#xff08;函数参数类型&#xff09; 函数参数的兼容性就不要从接口角度…

智能电视的操作系统可能具备哪些优势

丰富的应用资源&#xff1a; 操作系统内置了应用商店&#xff0c;提供了丰富的应用资源&#xff0c;涵盖视频、游戏、教育等多个领域&#xff0c;满足不同用户的多样化需求。用户可以轻松下载并安装所需的应用&#xff0c;享受更多元化的娱乐和学习体验。 流畅的操作体验&…

Xget 正式发布:您的高性能、安全下载加速工具!

您可以通过 star 我固定的 GitHub 存储库来支持我&#xff0c;谢谢&#xff01;以下是我的一些 GitHub 存储库&#xff0c;很有可能对您有用&#xff1a; tzst Xget Prompt Library 原文 URL&#xff1a;https://blog.xi-xu.me/2025/06/02/xget-launch-high-performance-sec…

精美的软件下载页面HTML源码:现代UI与动画效果的完美结合

精美的软件下载页面HTML源码&#xff1a;现代UI与动画效果的完美结合 在数字化产品推广中&#xff0c;一个设计精良的下载页面不仅能提升品牌专业度&#xff0c;还能显著提高用户转化率。本文介绍的精美软件下载页面HTML源码&#xff0c;通过现代化UI设计与丰富的动画效果&…

麒麟v10+信创x86处理器离线搭建k8s集群完整过程

前言 最近为某客户搭建内网的信创环境下的x8s集群&#xff0c;走了一些弯路&#xff0c;客户提供的环境完全与互联网分离&#xff0c;通过yum、apt这些直接拉依赖就别想了&#xff0c;用的操作系统和cpu都是国产版本&#xff0c;好在仍然是x86的&#xff0c;不是其他架构&…

Pycharm的使用技巧总结

目录 一、高效便捷的快捷键 二、界面汉化处理 1.设置 2.插件 3.汉化插件安装 三、修改字体大小、颜色 1.选择文件-设置 2.选择编辑器-配色方案-python 3.修改注释行颜色 4.修改编辑器字体颜色 一、高效便捷的快捷键 序号快捷键功能场景效果1Ctrl /快速注释/取消注释…

安全编码规范与标准:对比与分析及应用案例

在软件开发领域&#xff0c;尤其是涉及安全关键系统的开发中&#xff0c;遵循编码规范和标准是确保软件质量和安全性的重要手段。除了CERT C、CERT Java和MISRA外&#xff0c;还有其他多个与安全相关的编码规范和标准&#xff0c;以下是一些主要标准的对比说明&#xff1a; 一…

FFmpeg学习笔记

1. 播放器的架构 2. 播放器的渲染流程 3. ffmpeg下载与安装 3.0 查看PC是否已经安装了ffmpeg ffmpeg 3.1 下载 wget https://ffmpeg.org/releases/ffmpeg-7.0.tar.gz 3.2 解压 tar zxvf ffmpeg-7.0.tar.gz && cd ./ffmpeg-7.0 3.3 查看配置文件 ./configure …

大宽带怎么做

我有10个G的宽带资源&#xff0c;怎样运行P2P才能将收益巨大化&#xff0c;主要有以下几种方式&#xff1a; 1.多设备汇聚模式&#xff1a;使用多台支持千兆网络的服务器或专用PCDN设备&#xff08;如N1盒子&#xff09;&#xff0c;将10条宽带分别接入不同设备&#xff0c;通过…

pytorch基本运算-导数和f-string

引言 在前序对机器学习的探究过程中&#xff0c;我们已经深刻体会到人工智能到处都有微分求导运算&#xff0c;相关文章链接包括且不限于&#xff1a; BP神经网络 逻辑回归 对于pytorch张量&#xff0c;求导运算必不可少&#xff0c;所以本次就专门来学习一下。 f-string的用…

dvwa4——File Inclusion

LOW: 先随便点开一个文件&#xff0c;可以观察到url栏变成这样&#xff0c;说明?page是dvwa当前关卡用来加载文件的参数 http://10.24.8.35/DVWA/vulnerabilities/fi/?pagefile1.php 我们查看源码 &#xff0c;没有什么过滤&#xff0c;直接尝试访问其他文件 在url栏的pag…

经典面试题:一文了解常见的缓存问题

在面试过程中&#xff0c;面试官的桌子上摆放着很多高频的面试题&#xff0c;能否顺利回答决定了你面试通过的概率。其中缓存问题就是其中的一份&#xff0c;可以说掌握缓存问题及解决方法是面试前必须准备的内容。那么缓存有什么典型的问题&#xff0c;出现的原因是什么&#…

生产环境中安装和配置 Nginx 以部署 Flask 应用的详细指南

在生产环境中部署 Flask 应用时&#xff0c;Nginx 常被用作反向代理服务器&#xff0c;与 WSGI 服务器&#xff08;如 Gunicorn&#xff09;协同工作。Nginx 可以处理静态文件、提供 SSL/TLS 加密、实现负载均衡等功能。本文将详细介绍如何在 Ubuntu/Debian 系统上安装 Nginx&a…

鸿蒙进阶——Mindspore Lite AI框架源码解读之模型加载详解(一)

文章大纲 引言一、模型加载概述二、核心数据结构三、模型加载核心流程 引言 Mindspore 是一款华为开发开源的AI推理框架&#xff0c;而Mindspore Lite则是华为为了适配在移动终端设备上运行专门定制的版本&#xff0c;使得我们可以在OpenHarmony快速实现模型加载和推理等功能&…

AI炼丹日志-24 - MCP 自动操作 提高模型上下文能力 Cursor + Sequential Thinking Server Memory

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; Java篇&#xff1a; MyBatis 更新完毕目前开始更新 Spring&#xff0c;一起深入浅出&#xff01; 大数据篇 300&#xff1a; Hadoop&…

【仿muduo库实现并发服务器】实现时间轮定时器

实现时间轮定时器 1.时间轮定时器原理2.项目中实现目的3.实现功能3.1构造定时任务类3.2构造时间轮定时器每秒钟往后移动添加定时任务刷新定时任务取消定时任务 4.完整代码 1.时间轮定时器原理 时间轮定时器的原理类似于时钟&#xff0c;比如现在12点&#xff0c;定一个3点的闹…

Windows10下搭建sftp服务器(附:详细搭建过程、CMD连接测试、连接失败问题分析解决等)

最终连接sftp效果 搭建sftp服务器 1、这里附上作者已找好的 freeSSHd安装包 ,使用它进行搭建sftp服务器。 2、打开freeSSHd安装包,进行安装 (1)、选择完全安装 (2)、安装完成后,对提示窗口选择关闭 (3)、安装完成后,提示是否安装私有密钥。我们选择"是" (4)、安…

推荐几个不错的AI入门学习视频

引言&#xff1a;昨天推荐了几本AI入门书&#xff08;AI入门书&#xff09;&#xff0c;反响还不错。今天&#xff0c;我再推荐几个不错的AI学习视频&#xff0c;希望对大家有帮助。 网上关于AI的学习视频特别多。有收费的&#xff0c;也有免费的。我今天只推荐免费的。 我们按…