uniapp框架配置项pages.json

uniapp框架配置项pages.json

pages.json 文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。

globalStyle 全局配置

用于设置应用的状态栏、导航条、标题、窗口背景色等。下面配置项默认应用于每个页面。
注意：更改 pages.json 里面的配置信息后，最好是重新运行项目，并且手机上的app也要退出重新打开；不然有时候不生效。

状态栏和导航栏

  1. navigationBarBackgroundColor,默认颜色#F7F7F7，导航栏北京颜色，同状态栏背景色。
"globalStyle": {
		"navigationBarBackgroundColor": "#007aff"
	},

uniapp框架配置项pages.json
2. navigationBarTitleText，导航栏标题文字内容。

"globalStyle": {
		"navigationBarBackgroundColor": "#007aff",
		"navigationBarTitleText": "APP"
	},

uniapp框架配置项pages.json
3. navigationBarTextStyle导航栏标题颜色及状态栏前景颜色,仅支持 black/white

"navigationBarTextStyle": "white"

uniapp框架配置项pages.json
4. titleImage，导航栏图片地址(替换导航栏标题文字)，支付宝小程序内必须使用https的图片链接地址。globalStyle 中设置的 titleImage 也会覆盖掉 pages -> style 内的设置文字标题。

		"titleImage": "/static/logo.png"

uniapp框架配置项pages.json
5. transparentTitle导航栏整体透明（ always 一直透明 / auto 滑动自适应 / none 不透明）。
测试：在index.vue中来个v-for循环内容超过屏高。

		"transparentTitle": "always"

uniapp框架配置项pages.json
6. navigationStyle导航栏样式，仅支持 default/custom, custom不显示原生导航栏并且状态栏不占位。

上拉和下拉刷新配置项与对应生命周期函数

bounce 上拉下拉回弹

backgroundColor下拉上拉回弹的背景色。

	"backgroundColor": "#00FFFF"

uniapp框架配置项pages.json
uniapp框架配置项pages.json
backgroundColorTop下拉顶部窗口的背景色（bounce回弹区域）,backgroundColorBottom,上拉底部窗口的背景色（bounce回弹
区域）

		"backgroundColorTop": "#ffff00",
		"backgroundColorBottom": "#ff00ff"

下拉回弹
uniapp上拉回弹背景色
上拉回弹
uniapp下拉回弹背景色

下拉刷新和上拉触底

主要用于下拉刷新数据，上拉触底查询下一页数据。一般针对需要使用的页面进行配置，而不会全局配置。
enablePullDownRefresh,是否开启下拉刷新。
backgroundTextStyle,开启下拉刷新后，下拉 loading 的样式，仅支持 dark / light。
onReachBottomDistance,页面上拉触底事件触发时距页面底部距离，单位只支持px。
uniapp框架配置项pages.json
下拉刷新触发页面生命周期onPullDownRefresh的方法，如下：
uniapp框架配置项pages.json
下拉刷新触发结果如下：
uniapp框架配置项pages.json
上拉触到底部触发方法：onReachBottom
uniapp框架配置项pages.json
上拉触底：
在这里插入图片描述

pages 页面配置

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

属性描述
path配置页面路径
style配置页面窗口表现

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

代码示例：
{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/category/index",
			"style": {
				"navigationBarBackgroundColor": "#4cd964",
				"navigationBarTitleText": "分类"	,
				"navigationBarTextStyle": "white",
				"navigationBarShadow": { // 导航栏阴影
					"colorType": "red" 
				},
				// "disableScroll": true // 设置为true则页面整体不能上下滚动
				"app-plus": { // 主要针对app端配置
					"background": "#007AFF",
					"scrollIndicator": "none", //不显示滚动条
					"titleNView": { // 自定义导航栏
						"backgroundColor": "#007AFF", //如果上面设置了navigationBarBackgroundColor,则以此为准
						"buttons": [
							{
								"type": "share" //左上角分享按钮
							},
							{
								"fontSrc": "/static/icon/iconfont.ttf",
								"text": "\ue689",
								"fontSize": "23",
								"float": "left"
							}
						],
						"searchInput": { // 搜索框
							"align": "center", //搜索框居中,
							"autoFocus": true, //是否获取焦点
							"backgroundColor": "#F0F1F2", // 搜索框背景色
							"borderRadius": "30rpx", //搜索框圆角
							"placeholder": "搜索内容", //搜索提示
							"disabled": true,
							"placeholderColor": "#F79c9D" //提示文字
						}
					}
				}
			}
		},
		{
			"path": "pages/index/index",
			"style": {
			}
		}
	],
	// 全局配置，
	"globalStyle": {
		"navigationBarBackgroundColor": "#007aff",
		"navigationBarTitleText": "APP",
		// "titleImage": "/static/logo.png",
		"transparentTitle": "none",
		"backgroundColorTop": "#0000FF",
		"backgroundColorBottom": "#ff00ff",
		"enablePullDownRefresh": true, // 是否开启下拉刷新，默认false
		"backgroundTextStyle": "light",
		"onReachBottomDistance": 50	
	},
	"uniIdRouter": {}
}

效果：
uniapp框架配置项pages.json

底部导航tabBar配置

创建tabbar对应的页面
uniapp框架配置项pages.json
文件中加入icon图标
uniapp框架配置项pages.json
配置page代码：

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
			}
		},
		{
			"path": "pages/category/index",
			"style": {
				"navigationBarBackgroundColor": "#4cd964",
				"navigationBarTitleText": "分类"	,
				"navigationBarTextStyle": "white",
				"navigationBarShadow": { // 导航栏阴影
					"colorType": "red" 
				},
				// "disableScroll": true // 设置为true则页面整体不能上下滚动
				"app-plus": { // 主要针对app端配置
					"background": "#007AFF",
					"scrollIndicator": "none", //不显示滚	动条
					"titleNView": { // 自定义导航栏
						"backgroundColor": "#007AFF", //如果上面设置了navigationBarBackgroundColor,则以此为准
						"buttons": [
							{
								"type": "share" //左上角分享按钮
							},
							{
								"fontSrc": "/static/icon/iconfont.ttf",
								"text": "\ue689",
								"fontSize": "23",
								"float": "left"
							}
						],
						"searchInput": { // 搜索框
							"align": "center", //搜索框居中,
							"autoFocus": true, //是否获取焦点
							"backgroundColor": "#F0F1F2", // 搜索框背景色
							"borderRadius": "30rpx", //搜索框圆角
							"placeholder": "搜索内容", //搜索提示
							"disabled": true,
							"placeholderColor": "#F79c9D" //提示文字
						}
					}
				}
			}
		},
		{
			"path" : "pages/course/course",
			"style" : 
			{
				"navigationBarTitleText" : "阅读"
			}
		},
		{
			"path" : "pages/question/question",
			"style" : 
			{
				"navigationBarTitleText" : "问答"
			}
		},
		{
			"path" : "pages/my/my",
			"style" : 
			{
				"navigationBarTitleText" : "我的"
			}
		}
	],
	"tabBar": {
		"color": "#b0abb3", // tab上的文字颜色
		"selectedColor": "#345dc2", // 选中的字体颜色
		"backgroundColor": "#f8f8f8", //tab背景色
		"borderStyle": "black",
		"list": [
			{
				"pagePath": "pages/index/index",
				"text": "首页",
				"iconPath": "static/tab/index.png",
				"selectedIconPath": "static/tab/index-active.png"
			},
			{
				"pagePath": "pages/category/index",
				"text": "分类",
				"iconPath": "static/tab/category.png",
				"selectedIconPath": "static/tab/category-active.png"
			},
			{
				"pagePath": "pages/course/course",
				"text": "阅读",
				"iconPath": "static/tab/article.png",
				"selectedIconPath": "static/tab/article-active.png"
			},
			{
				"pagePath": "pages/question/question",
				"text": "问答",
				"iconPath": "static/tab/question.png",
				"selectedIconPath": "static/tab/question-active.png"
			},
			{
				"pagePath": "pages/my/my",
				"text": "我的",
				"iconPath": "static/tab/my.png",
				"selectedIconPath": "static/tab/my-active.png"
			}
		]
	},
	// 全局配置，
	"globalStyle": {
		"navigationBarBackgroundColor": "#007aff",
		"navigationBarTitleText": "APP",
		// "titleImage": "/static/logo.png",
		"transparentTitle": "none",
		"backgroundColorTop": "#0000FF",
		"backgroundColorBottom": "#ff00ff",
		"enablePullDownRefresh": true, // 是否开启下拉刷新，默认false
		"backgroundTextStyle": "light",
		"onReachBottomDistance": 50	
	},
	"uniIdRouter": {}
}

效果：
uniapp框架配置项pages.json
完结~

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

蓝桥杯c++算法学习【1】之枚举与模拟（卡片、回文日期、赢球票、既约分数：：：非常典型的比刷例题！！！）

蓝桥杯c++算法学习【1】之枚举与模拟（卡片、回文日期、赢球票、既约分数：：：非常典型的比刷例题！！！）

重发一下，之前得排版有问题，而且另外加了一道题。。 别忘了请点个赞收藏关注支持一下博主喵！！！ 关注博主，更多蓝桥杯nice题目静待更新:) 枚举与模拟 一、卡片： 【问题描述】 小蓝有很多数字…
阅读更多...
Java 基于 SpringBoot+Vue 的社区智慧养老系统（V3.0）

Java 基于 SpringBoot+Vue 的社区智慧养老系统（V3.0）

大家好，我是Java徐师兄，今天为大家带来的是Java 基于 SpringBootVue 的社区智慧养老系统（V3.0）。该系统采用 Java 语言开发，SpringBoot 框架，MySql 作为数据库，系统功能完善 ，实用性…
阅读更多...
el-table 纵向垂直表头处理

el-table 纵向垂直表头处理

项目中表格展示会遇到需要纵向垂直表头情况，下面，我们基于el-table组件来实现这种表格。 以下是这次需要用到的数据表格，已知左侧违章名称是固定的，而月份是不固定的，在后端返回数据格式已确定的情况下，需…
阅读更多...
caozha-CEPCS（新冠肺炎疫情防控系统）

caozha-CEPCS（新冠肺炎疫情防控系统）

caozha-CEPCS，是一个基于PHP开发的新冠肺炎疫情防控系统，CEPCS（全称：COVID-19 Epidemic Prevention and Control System），可以应用于单位、企业、学校、工业园区、村落等等。小小系统，希望能为大…
阅读更多...
新手如何快速搭建一个Springboot项目

新手如何快速搭建一个Springboot项目

新手如何快速搭建一个Springboot项目 一、开发环境准备后端其他工具 二、创建后端项目三、定义HelloController.hello()方法，返回“Hello Springboot” 一、开发环境准备 后端 1.安装 JDK：确保你的系统中安装了合适版本的 JDK，Spring Boot …
阅读更多...
uniapp—android原生插件开发（4uniapp引用aar插件）

uniapp—android原生插件开发（4uniapp引用aar插件）

本篇文章从实战角度出发，将UniApp集成新大陆PDA设备RFID的全过程分为四部曲，涵盖环境搭建、插件开发、AAR打包、项目引入和功能调试。通过这份教程，轻松应对安卓原生插件开发与打包需求！ 一、将android程序打包成aar插件包 直接使…
阅读更多...
vs2022搭建opencv开发环境

vs2022搭建opencv开发环境

1 下载OpenCV库 https://opencv.org/ 下载对应版本然后进行安装 将bin目录添加到系统环境变量opencv\build\x64\vc16\bin 复制该路径 打开高级设置添加环境变量 vs2022新建一个空项目 修改属性添加头文件路径和库路径 修改链接器，将OpenCV中lib库里的o…
阅读更多...
[Java]微服务拆分

[Java]微服务拆分

导入项目 本篇及后续的微服务学习都是基于Centos7系统下的Docker部署，因此需要准备: Centos7的环境SSH客户端安装好Docker会使用Docker 之前的学习, 导致虚拟机中存在黑马商城项目以及mysql数据库, 为了保持一致, 需要删除 cd /rootdocker compose down 安装mysq…
阅读更多...
【C++】内存池

【C++】内存池

目录 一、什么是内存池 1.池化技术 2.内存池 3.内存池主要解决的问题 二、内存池的实现 1.New申请空间 2.Delete释放空间 3.再看New申请空间 4.内存池完整代码 三、内存池性能测试 一、什么是内存池 1.池化技术 所谓 "池化技术"，就是程序向系统…
阅读更多...
计算机新手练级攻略——如何搜索问题

计算机新手练级攻略——如何搜索问题

目录 计算机学生新手练级攻略——如何搜索问题1.明确搜索意图2.使用精确关键词3.使用专业引擎搜索4.利用好技术社区1. Stack Overflow2. GitHub3. IEEE Xplore4. DBLP 5.使用代码搜索工具1. GitHub 代码搜索2. Stack Overflow 代码搜索3. Papers with Code4. IEEE Xplore 6.查阅…
阅读更多...
区块链技术在电子政务中的应用

区块链技术在电子政务中的应用

💓 博客主页：瑕疵的CSDN主页 📝 Gitee主页：瑕疵的gitee主页 ⏩ 文章专栏：《热点资讯》 区块链技术在电子政务中的应用 区块链技术在电子政务中的应用 区块链技术在电子政务中的应用 引言 区块链技术概述 定义与原理 发…
阅读更多...
stm32 踩坑笔记

stm32 踩坑笔记

串口问题： 问题：会改变接收缓冲的下一个字节 串口的初始化如下，位长度选择了9位。因为要奇偶校验，要选择9位。但是接收有用数据只用到1个字节。 问题原因： 所以串口接收时会把下一个数据更改
阅读更多...
034集——JIG效果实现（橡皮筋效果）（CAD—C#二次开发入门）

034集——JIG效果实现（橡皮筋效果）（CAD—C#二次开发入门）

可实现效果如下（对象捕捉F3需打开，否则效果不好）： public class CircleJig : EntityJig{public static void DraCJig(){PromptPointResult ppr Z.ed.GetPoint("a");if (ppr.Value null) return;Point3d pt ppr.Value…
阅读更多...
数据资产入表，如何接住这“泼天的富贵”？

数据资产入表，如何接住这“泼天的富贵”？

很多管理者没有意识到，数据资产入表是企业增加资产的一场“开卷考试”。 “数据资产入表”，指在企业的资产负债表上体现数据资产，在法律上认可数据资产的财务价值。去年财政部发布《企业数据资源相关会计处理暂行规定》，并于今年…
阅读更多...
更稳更高效！大道云行助力广电业务腾飞！

更稳更高效！大道云行助力广电业务腾飞！

重庆广播电视集团成立于2004年11月，旗下拥有5套广播频率、13套电视频道、覆盖全市3300万人口的有线、无线传输网络，以及由第1眼新闻、视界网、官方微信微博群等组成的新媒体矩阵，融合传播综合实力位居全国前列。 目前，重庆广电全…
阅读更多...
NIST密码学未来展望：Naughty Step 上的 SHA-1、3DES 和 SHA-224

NIST密码学未来展望：Naughty Step 上的 SHA-1、3DES 和 SHA-224

1. 引言 NIST 几十年来一直致力于推动密码学标准的发展，2024年10月，其发布了Transitioning the Use of Cryptographic Algorithms and Key Lengths 草案： 概述了 SHA-1（为160位哈希算法） 将在不久的将来退役&#xf…
阅读更多...
物理验证Calibre LVS | SMIC Process过LVS时VNW和VPW要如何做处理？

物理验证Calibre LVS | SMIC Process过LVS时VNW和VPW要如何做处理？

SMIC家工艺的数字后端实现PR chipfinish写出来的带PG netlist如下图所示。我们可以看到标准单元没有VNW和VPW pin的逻辑连接关系。 前几天小编在社区星球上分享了T12nm ananke_core CPU低功耗设计项目的Calibre LVS案例，就是关于标准单元VPP和VBB的连接问题。 目前…
阅读更多...
今天给在家介绍一篇基于jsp的旅游网站设计与实现

今天给在家介绍一篇基于jsp的旅游网站设计与实现

项目描述 临近学期结束，还是毕业设计，你还在做java程序网络编程，期末作业，老师的作业要求觉得大了吗?不知道毕业设计该怎么办?网页功能的数量是否太多?没有合适的类型或系统?等等。这里根据疫情当下，你想解决的问…
阅读更多...
【C#设计模式(4)——构建者模式(Builder Pattern)】

【C#设计模式(4)——构建者模式(Builder Pattern)】

前言 C#设计模式(4)——构建者模式(Builder Pattern) 运行结果 代码 public class Computer {private string part1 "CPU";private string part2 "主板";private string part3 "内存";private string part4 "显卡";private st…
阅读更多...
软件测试第二篇软件测试技术

软件测试第二篇软件测试技术

第五章单元测试和集成测试的技术 单元静态测试主要由开发人员完成。 标准：规定什么能做，什么不能做。 规范：建议你要怎么做。 5.1.2 代码评审 代码评审是一种发现代码缺陷的另一种测试方法。 代码审查的最佳实践： 创建代码审…
阅读更多...
最新文章

Copyright @ 2022~2023