uni-app学习笔记二十--pages.json页面路由pages设置

uni-app 通过 pages 节点配置应用由哪些页面组成,pages 节点接收一个数组,数组每个项都是一个对象,其属性值如下:

属性类型默认值描述
pathString配置页面路径
styleObject配置页面窗口表现,配置项参考下方 pageStyle
needLoginBooleanfalse是否需要登录才可访问

 Tips:

  • pages节点的第一项为应用入口页(即首页)
  • 应用中新增/减少页面,都需要对 pages 数组进行修改
  • 文件名不需要写后缀,框架会自动寻找路径下的页面资源

style

用于设置每个页面的状态栏、导航条、标题、窗口背景色等。这里重点说一下navigationStyle

navigationStyleStringdefault导航栏样式,仅支持 default/custom。custom即取消默认的原生导航栏,需看使用注意

uni-app中的页面,默认保存在工程根目录下的pages目录下。

新建页面

每次新建页面,均需在pages.json中配置pages列表;未在pages.json -> pages 中注册的页面,uni-app会在编译阶段进行忽略。

删除页面

删除页面时,需做两件工作:

  • 删除.vue文件、.nvue.uvue文件
  • 删除pages.json -> pages列表项中的配置 (如使用HBuilderX删除页面,会在状态栏提醒删除pages.json对应内容,点击后会打开pages.json并定位到相关配置项)

示例代码:

	"pages": [ //pages数组中第一项表示应用启动页{"path": "pages/index/index","style": {"navigationBarTitleText": "uni-app"}},{"path" : "pages/classfy/classfy","style" : {"navigationBarTitleText" : "分类","navigationBarBackgroundColor": "#F2E6DE","navigationBarTextStyle": "black","enablePullDownRefresh": true}},{"path" : "pages/user/user","style" : {"navigationBarTitleText" : "个人中心"}}]

 注意:如果page里style配置跟上一篇提到的globalStyle配置了同样的属性,那么该页面的样式最终会以page里style为准。可以根据开发实际需要灵活选择使用全局配置,还是页面自定义配置。

自定义导航栏使用注意

当navigationStyle设为custom或titleNView设为false时,原生导航栏不显示,此时要注意几个问题:

  • 非H5端,手机顶部状态栏区域会被页面内容覆盖。这是因为窗体是沉浸式的原因,即全屏可写内容。uni-app提供了状态栏高度的css变量--status-bar-height,如果需要把状态栏的位置从前景部分让出来,可写一个占位div,高度设为css变量。

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.pswp.cn/news/907852.shtml

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

相关文章

VScode编译调试debug,gpu的cuda程序,Nsight

进行下面操作的前提是,我们的环境已经能跑简单的CUDA程序了。 一、安装Nsight 二、创建launch.json文件 {"version": "0.2.0","configurations": [{"name": "CUDA C: Launch","type": "cuda-gdb…

链表题解——合并两个有序链表【LeetCode】

1. 算法思路 这段代码的核心思想是 合并两个有序链表。具体步骤如下: 初始化哨兵节点: 创建一个哨兵节点 dummy,用于简化链表操作,避免处理头节点的特殊情况。使用指针 cur 指向 dummy,用于构建新的链表。 遍历两个链…

K8S集群主机网络端口不通问题排查

一、环境: k8s: v1.23.6 docker: 20.10.14 问题和故障现象:devops主机集群主机节点到端口8082不通(网络策略已经申请,并且网络策略已经实施完毕),而且网络实施人员再次确认,网络策…

qemu安装risc-V 64

参考这篇文章https://developer.aliyun.com/article/1323996,其中在wsl下面安装可能会报错环境变量中有空格。 # clean_path.sh#!/bin/bash# 备份旧 PATH OLD_PATH"$PATH"# 过滤掉包含空格、制表符、换行的路径 CLEAN_PATH"" IFS: read -ra PA…

python爬虫:RoboBrowser 的详细使用

更多内容请见: 爬虫和逆向教程-专栏介绍和目录 文章目录 一、RoboBrowser概述1.1 RoboBrowser 介绍1.2 安装 RoboBrowser1.3 与类似工具比较二、基本用法2.1 创建浏览器对象并访问网页2.2 查找元素2.3 填写和提交表单三、高级功能3.1 处理文件上传3.2 处理JavaScript重定向3.3…

CTFSHOW-WEB-36D杯

给你shell 这道题对我这个新手还是有难度的&#xff0c;花了不少时间。首先f12看源码&#xff0c;看到?view_source&#xff0c;点进去看源码 <?php //Its no need to use scanner. Of course if you want, but u will find nothing. error_reporting(0); include "…

CentOS_7.9 2U物理服务器上部署系统简易操作步骤

近期单位网站革新&#xff0c;鉴于安全加固&#xff0c;计划将原有Windows环境更新到Linux-CentOS 7.9&#xff0c;这版本也没的说&#xff08;绝&#xff09;了&#xff08;版&#xff09;官方停止更新&#xff0c;但无论如何还是被sisi的牵挂着这一大批人&#xff0c;毕竟从接…

LVS-DR高可用-Keepalived

目录 Keepalved双机热备 核心概念 关键组件 工作流程 实例环境 配置keepalived Web服务器配置 Keepalved双机热备 Keepalived双机热备是一种基于VRRP&#xff08;Virtual Router Redundancy Protocol&#xff0c;虚拟路由冗余协议&#xff09;实现的高可用性解决方案&am…

Polar编译码(SCL译码)和LDPC编译码(BP译码)的matlab性能仿真,并对比香农限

目录 1.算法仿真效果 2.算法涉及理论知识概要 2.1香农极限 2.2 Polar码编译码原理与SCL译码 2.3 LDPC码编译码原理与BP译码 3.MATLAB核心程序 4.完整算法代码文件获得 1.算法仿真效果 matlab2024b仿真结果如下&#xff08;完整代码运行后无水印&#xff09;&#xff1a…

AI 产品的 MVP 构建逻辑:Prompt 工程 ≠ 产品工程?(实战增补篇)

一. 系统思维&#xff1a;产品工程的全局把控&#xff08;实战增补篇&#xff09; 1. 某智能风控系统的弹性架构实践 某消费金融公司在开发「30 秒极速贷」产品时&#xff0c;面临两大挑战&#xff1a; Prompt 优化困境&#xff1a;传统风控模型依赖 “提取用户信用报告关键…

Unity程序集

对于Unity的程序集&#xff0c;具体内容可以参考Unity官方文档&#xff0c;程序集定义 - 预定义程序集 比如Unity的默认程序集&#xff0c;Assembly-CSharp.dll&#xff0c;还有其他的比如 Assembly-CSharp-Editor.dll&#xff0c;Assembly-CSharp-firstpass.dll 没有指定或…

【架构艺术】平衡技术架构设计和预期的产品形态

近期笔者因为工作原因&#xff0c;开始启动team内部部分技术项目的重构。在事情启动的过程中&#xff0c;内部对于这件事情的定性和投入有一些争论&#xff0c;但最终还是敲定了下来。其中部分争论点主要在于产品形态&#xff0c;因为事情涉及到跨部门合作&#xff0c;所以产品…

React和原生事件的区别

一、核心差异对比表 维度原生事件React 事件绑定语法HTML 属性&#xff08;onclick&#xff09;或 DOM API&#xff08;addEventListener&#xff09;JSX 中使用驼峰式属性&#xff08;onClick&#xff09;绑定位置直接绑定到具体 DOM 元素统一委托到根节点&#xff08;React …

大模型-modelscope下载和使用chatglm3-6b模型

前言 由于官方chatglm3-6b大模型文件下载比较慢&#xff0c;找到国内modelscope代替方案 1.SDK下载 pip install modelscope2.下载大模型文件 ✅方法1:通过pip下载 1.安装 setuptools 在当前使用的 Python 环境中安装 setuptools pip install setuptools2.通过如下命令安…

【unity游戏开发——编辑器扩展】AssetDatabase公共类在编辑器环境中管理和操作项目中的资源

注意&#xff1a;考虑到编辑器扩展的内容比较多&#xff0c;我将编辑器扩展的内容分开&#xff0c;并全部整合放在【unity游戏开发——编辑器扩展】专栏里&#xff0c;感兴趣的小伙伴可以前往逐一查看学习。 文章目录 前言一、AssetDatabase常用API1、创建资源1.1 API1.2 示例 …

css实现文字渐变

在前端开发中&#xff0c;给文字设置渐变色是完全可以实现的&#xff0c;常用的方式是结合 CSS 的 background、-webkit-background-clip 和 -webkit-text-fill-color 属性。下面是一个常见的实现方法&#xff1a; <!DOCTYPE html> <html lang"zh-CN"> …

WSL 开发环境搭建指南:Java 11 + 中间件全家桶安装实战

在WSL&#xff08;Windows Subsystem for Linux&#xff09;环境下一站式安装开发常用工具&#xff0c;能极大提升工作效率。接下来我将分步为你介绍如何在WSL中安装Java 11、Maven、Redis、MySQL、Nacos、RabbitMQ、RocketMQ、Elasticsearch&#xff08;ES&#xff09;和Node.…

vue3: baidusubway using typescript

项目结构&#xff1a; <!--npm install -D tailwindcss-3d BaiduSubwayMap.vue npm install -D tailwindcss postcss autoprefixer--> <template><div class"relative w-full h-screen"><!-- 地图容器 --><div id"subway-container…

【iptables防火墙】-- URL过滤 (Hexstring、IP、DoT和DoH)

在路由器中使用iptables工具对URL地址进行过滤涉及到如下几个方面&#xff0c;hexstring、ip、DoT和DoH。 以过滤www.baidu.com为例 1、DNS阻断 m string --hex-string是iptables中一个以​十六进制格式​定义要匹配的二进制特征并且支持混合明文和二进制数据的模块。由于DN…

mysql-本地编译 MySQL 源码

完全理解你的感受&#xff01;MySQL 源码本地调试确实是一个“坑多”的过程&#xff0c;尤其是当你第一次尝试从源码构建和调试 MySQL 时。但别担心&#xff0c;我来一步步帮你梳理整个流程&#xff0c;并提供一个详细、可操作的指南&#xff0c;让你可以顺利跑起来 MySQL 源码…