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
完结~

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

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

相关文章

Android关机流程知多少？

Android关机流程知多少？

在 Android 中，关机流程涉及系统各个组件的协同工作，确保设备在断电之前能够安全地关闭所有活动并保存数据。以下是 Android 系统中关机流程的详细介绍： 1. 用户触发关机请求 关机流程由用户的操作触发，通常有以下几种方式&#…
阅读更多...
Docker使用docker-compose一键部署nacos、Mysql、redis

Docker使用docker-compose一键部署nacos、Mysql、redis

下面是一个简单的例子，展示如何通过Docker Compose文件部署Nacos、MySQL和Redis。请确保您的机器上已经安装了Docker和Docker Compose。 1，准备好mysql、redis、nacos镜像 sudo docker pull mysql:8 && sudo docker pull redis:7.2 &&…
阅读更多...
移远通信亮相骁龙AI PC生态科技日，以领先的5G及Wi-Fi产品革新PC用户体验

移远通信亮相骁龙AI PC生态科技日，以领先的5G及Wi-Fi产品革新PC用户体验

PC作为人们学习、办公、娱乐的重要工具，已经深度融入我们的工作和生活。随着物联网技术的快速发展，以及人们对PC性能要求的逐步提高，AI PC成为了行业发展的重要趋势。 11月7-8日，骁龙AI PC生态科技日在深圳举办。作为高通骁龙的重…
阅读更多...
SCUI Admin + Laravel 整合

SCUI Admin + Laravel 整合

基于 Vue3 和 Element Plus 和 Laravel 整合开发 项目地址：持续更新 LaravelVueProject: laravel vue3 scui
阅读更多...
Docker的轻量级可视化工具Portainer

Docker的轻量级可视化工具Portainer

docker目录 1 Portainer官方链接2 是什么？3 下载安装4 跑通一次5 后记 1 Portainer官方链接 这里给出portainer的官方链接：https://www.portainer.io/ portainer安装的官方链接：https://docs.portainer.io/start/install-ce/server/docker/l…
阅读更多...
Sql server 备份还原方法

Sql server 备份还原方法

备份 方法1，选择对应的数据库名-------》右键 任务---------》备份 默认备份类型 完整 文件后缀 .bak 方法2,选择对应的数据库名-------》右键 任务----------》生成脚本 选择要编写的数据库对象(表，视图，存储过程等) 选择对应的 服…
阅读更多...
Android CarrierConfig 参数项和正则匹配逻辑

Android CarrierConfig 参数项和正则匹配逻辑

背景 在编写CarrierConfig的时候经常出现配置不生效的情况，比如运营商支持大范围的imsi，或者是测试人员写卡位数的问题等等，因此就需要模式匹配（包含但不限于正则表达式）。 基本概念: 模式匹配涉及定义一个“模式”&a…
阅读更多...
可编辑PPT | 指挥中心系统建设与应用方案

可编辑PPT | 指挥中心系统建设与应用方案

本方案是一份全面的指挥中心系统建设与应用方案，涵盖了建设方案分析、指挥调度、远程通讯、会务管理等多个方面，旨在通过整合语音、视频监控、会议、指挥调度等多种技术，构建一个现代化、网络化、智慧化的城市指挥中心，以提高应对…
阅读更多...
【CentOS】中的Firewalld：全面介绍与实战应用（下）

【CentOS】中的Firewalld：全面介绍与实战应用（下）

🐇明明跟你说过：个人主页 🏅个人专栏：《Linux ：从菜鸟到飞鸟的逆袭》🏅 🔖行路有良友，便是天堂🔖 目录 一、引言 1、iptables 时代 2、firewalld 时代 二、服务管…
阅读更多...
人工智能在智能家居中的应用

人工智能在智能家居中的应用

💓 博客主页：瑕疵的CSDN主页 📝 Gitee主页：瑕疵的gitee主页 ⏩ 文章专栏：《热点资讯》 人工智能在智能家居中的应用 人工智能在智能家居中的应用 人工智能在智能家居中的应用 引言 人工智能概述 定义与原理 发展历程 …
阅读更多...
qt QWidgetAction详解

qt QWidgetAction详解

1、概述 QWidgetAction是Qt框架中的一个类，它继承自QAction类。QWidgetAction允许开发者将自定义的小部件（widget）插入到基于QAction的容器中，如工具栏或菜单项中。这使得QWidgetAction成为创建复杂用户界面和自定义菜单项的强大…
阅读更多...
一文了解什么是腾讯云开发

一文了解什么是腾讯云开发

一文了解什么是腾讯云开发 关于云开发的猜想腾讯云开发腾讯云开发的优势无服务跨平台轻松托管节约成本 快速上手云开发环境快速搭建管理后台 云开发体验 关于云开发的猜想 说到云开发，作为开发者的大家是否大概就有了想法。比如说过去的开发工作都是在自己本地电脑…
阅读更多...
2.操作系统常问面试题1

2.操作系统常问面试题1

2.1 Linux 中查看进程运行状态的指令、查看内存使用情况的指令、tar解压文件的参数是什么 1、查看进程运行状态的指令： ps aux 列出所有进程的详细信息。 ps aux | grep PID ，查看具体某PID进程状态。 在 Linux 中，可以使用以下指令来查看进…
阅读更多...
LED和QLED的区别

LED和QLED的区别

文章目录 1. 基础背光技术2. 量子点技术的引入3. 色彩表现4. 亮度和对比度5. 能效6. 寿命7. 价格总结 LED和 QLED都是基于液晶显示（LCD）技术的电视类型，但它们在显示技术、色彩表现和亮度方面有一些关键区别。以下是两者的详细区别&#xff…
阅读更多...
多路转接之poll

多路转接之poll

多路转接之poll 一、关于poll认识poll基于poll实现的服务器的原理 二、基于poll实现的服务器main.cpppollServer.hppsock.hppLog.hpppublic.hpp 一、关于poll 认识poll #include <poll.h> int poll(struct pollfd *fds, nfds_t nfds, int timeout);struct pollfd {int …
阅读更多...
# filezilla连接 虚拟机ubuntu系统出错“尝试连接 ECONNREFUSED - 连接被服务器拒绝， 失败，无法连接服务器”解决方案

# filezilla连接 虚拟机ubuntu系统出错“尝试连接 ECONNREFUSED - 连接被服务器拒绝， 失败，无法连接服务器”解决方案

filezilla连接 虚拟机ubuntu系统出错“尝试连接 ECONNREFUSED - 连接被服务器拒绝&#xff0c; 失败&#xff0c;无法连接服务器”解决方案 一、问题描述&#xff1a; 当我们用filezilla客户端 连接 虚拟机ubuntu系统时&#xff0c;报错“尝试连接 ECONNREFUSED - 连接被服务…
阅读更多...
TCP编程API

TCP编程API

这里写自定义目录标题 主要的 TCP 编程 API 函数1.1 socket()1.2 bind()1.3 listen()1.4 accept()1.5 connect()1.6 send()1.7 recv()1.8 close() 主要的 TCP 编程 API 函数 1.1 socket() 创建一个新的套接字。 int socket(int domain, int type, int protocol);domain&…
阅读更多...
STM32WB55RG开发(1)----开发板测试

STM32WB55RG开发(1)----开发板测试

STM32WB55RG开发----1.开发板测试 概述硬件准备视频教学样品申请源码下载产品特性参考程序生成STM32CUBEMX串口配置LED配置堆栈设置串口重定向主循环演示 概述 STM32WB55 & SENSOR是一款基于STM32WB55系列微控制器的评估套件。该套件采用先进的无线通信技术&#xff0c;支…
阅读更多...
人工智能、机器学习与深度学习：层层递进的技术解读

人工智能、机器学习与深度学习：层层递进的技术解读

引言 在当今科技快速发展的时代&#xff0c;人工智能&#xff08;AI&#xff09;已经成为一个热门话题&#xff0c;几乎渗透到了我们生活的方方面面。从智能手机的语音助手&#xff0c;到自动驾驶汽车&#xff0c;再到医疗诊断中的图像识别&#xff0c;人工智能的应用正在改变我…
阅读更多...
【Java学习】电脑基础操作和编程环境配置

【Java学习】电脑基础操作和编程环境配置

CMD 在Windows中用命令行的方式操作计算机。 打开CMD Win R输入CMD按下回车键 Win E 进入我的电脑 常用的CMD命令 盘符名称冒号 说明&#xff1a;盘符切换 举例&#xff1a;E:回车&#xff0c;表示切换到E盘 dir 说明&#xff1a;查看当前路径下的内容 cd目录 说明&a…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023