uni-app学习笔记二十一--pages.json中tabBar设置底部菜单项和图标

news2025/6/4 14:28:44

如果应用是一个多 tab 应用,可以通过 tabBar 配置项指定一级导航栏,以及 tab 切换时显示的对应页。

在 pages.json 中提供 tabBar 配置,不仅仅是为了方便快速开发导航,更重要的是在App和小程序端提升性能。在这两个平台,底层原生引擎在启动时无需等待js引擎初始化,即可直接读取 pages.json 中配置的 tabBar 信息,渲染原生tab。

Tips

  • 当设置 position 为 top 时,将不会显示 icon
  • tabBar 中的 list 是一个数组,最少要配置2个、最多只能配置5个 tab,tab 按数组的顺序排序。
  • tabbar 切换第一次加载时可能渲染不及时,可以在每个tabbar页面的onLoad生命周期里先弹出一个等待雪花(hello uni-app使用了此方式)
  • tabbar 的页面展现过一次后就保留在内存中,再次切换 tabbar 页面,只会触发每个页面的onShow,不会再触发onLoad。
  • 顶部的 tabbar 目前仅微信小程序上支持。需要用到顶部选项卡的话,建议不使用 tabbar 的顶部设置,而是自己做顶部选项卡,可参考 hello uni-app->模板->顶部选项卡。

属性说明:

属性类型必填默认值描述平台差异说明
colorHexColortab 上的文字默认颜色
selectedColorHexColortab 上的文字选中时的颜色
backgroundColorHexColortab 的背景色
borderStyleStringblacktabbar 上边框的颜色,可选值 black/white,black对应颜色rgba(0,0,0,0.33),white对应颜色rgba(255,255,255,0.33)。App 2.3.4+ 、H5 3.0.0+
listArraytab 的列表,详见 list 属性说明,最少2个、最多5个 tab

其中 list 接收一个数组,数组中的每个项都是一个对象,其属性值如下:

属性类型必填说明平台差异
pagePathString页面路径,必须在 pages 中先定义
textStringtab 上按钮文字,在 App 和 H5 平台为非必填。例如中间可放一个没有文字的+号图标
iconPathString图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px,当 position 为 top 时,此参数无效,不支持网络图片,不支持字体图标
selectedIconPathString选中时的图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px ,当 position 为 top 时,此参数无效
visibleBoolean该项是否显示,默认显示App (3.2.10+)、H5 (3.2.10+)
iconfontObject字体图标,优先级高于 iconPathApp(3.4.4+)、H5 (3.5.3+)

tarBar写于page.json中,与pages,globalStyle并列

示例代码:

"tabBar": {
		"color": "#999",
		"selectedColor": "#2B9939",
		"borderStyle": "white",
		"list": [
			{
				"pagePath" : "pages/index/index",
				"text": "首页",
				"iconPath": "/static/images/tabBar/home.png",
				"selectedIconPath": "/static/images/tabBar/home-h.png"
			},
			{
				"pagePath" : "pages/classfy/classfy",
				"text": "分类",
				"iconPath": "/static/images/tabBar/classify.png",
				"selectedIconPath": "/static/images/tabBar/classify-h.png"
			},
			{
				"pagePath" : "pages/user/user",
				"text": "我的",
				"iconPath": "/static/images/tabBar/user.png",
				"selectedIconPath": "/static/images/tabBar/user-h.png"
			}
		]
	}

 效果:

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

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

相关文章

【Redis】基本命令

Redis命令行客户端 现在我们已经启动了Redis服务,下面将介绍如何使用redis - cli连接、操作Redis服务。客户端和服务端的交互过程如图1 - 3所示。 redis - cli可以使用两种方式连接Redis服务器。 第一种是交互式方式:通过redis - cli -h {host} -p {p…

哈希:闭散列的开放定址法

我还是曾经的那个少年 1.概念 通过其要存储的值与存储的位置建立映射关系。 如:基数排序也是运用了哈希开放定址法的的思想。 弊端:仅适用于数据集中的情况 2.开放定址法 问题:按照上述哈希的方式,向集合插入数据为44&#xff…

Unity-QFramework框架学习-MVC、Command、Event、Utility、System、BindableProperty

QFramework QFramework简介 QFramework是一套渐进式、快速开发框架,适用于任何类型的游戏及应用项目,它包含一套开发架构和大量的工具集 QFramework的特性 简洁性:QFramework 强调代码的简洁性和易用性,让开发者能够快速上手&a…

FPGA实现CNN卷积层:高效窗口生成模块设计与验证

我最近在从事一项很有意思的项目,我想在PFGA上部署CNN并实现手写图片的识别。而本篇文章,是我迈出的第一步。具体代码已发布在github上 模块介绍 卷积神经网络(CNN)可以分为卷积层、池化层、激活层、全链接层结构,本篇要实现的&…

LeetCode 3068.最大节点价值之和:脑筋急转弯+动态规划(O(1)空间)

【LetMeFly】3068.最大节点价值之和:脑筋急转弯动态规划(O(1)空间) 力扣题目链接:https://leetcode.cn/problems/find-the-maximum-sum-of-node-values/ 给你一棵 n 个节点的 无向 树,节点从 0 到 n - 1 编号。树以长…

BLIP-2

目录 摘要 Abstract BLIP-2 模型框架 预训练策略 模型优势 应用场景 实验 代码 总结 摘要 BLIP-2 是一种基于冻结的图像编码器和大型语言模型的高效视觉语言预训练模型,由 Salesforce 研究团队提出。它在 BLIP 的基础上进一步优化,通过轻量级…

支持向量机(SVM)例题

对于图中所示的线性可分的20个样本数据,利用支持向量机进行预测分类,有三个支持向量 A ( 0 , 2 ) A\left(0, 2\right) A(0,2)、 B ( 2 , 0 ) B\left(2, 0\right) B(2,0) 和 C ( − 1 , − 1 ) C\left(-1, -1\right) C(−1,−1)。 求支持向量机分类器的线…

SQL中各个子句的执行顺序

select、from、 join、where、order by、group by、having、limit 解释 1) FROM (确定数据源) 查询的执行首先从FROM子句开始,确定数据的来源(表、视图、连接等)。 2) JOIN (如果有JOIN操作) 在FROM子句之后,SQL引擎会执行连接操作(JOIN)&#xff0c…

本地部署消息代理软件 RabbitMQ 并实现外部访问( Windows 版本 )

RabbitMQ 是由 Erlang 语言开发的 消息中间件,是一种应用程序之间的通信方法。支持多种编程和语言和协议发展,用于实现分布式系统的可靠消息传递和异步通信等方面。 本文将详细介绍如何在 Windows 系统本地部署 RabbitMQ 并结合路由侠实现外网访问本…

基于微信小程序的垃圾分类系统

博主介绍:java高级开发,从事互联网行业六年,熟悉各种主流语言,精通java、python、php、爬虫、web开发,已经做了六年的毕业设计程序开发,开发过上千套毕业设计程序,没有什么华丽的语言&#xff0…

流媒体基础解析:视频清晰度的关键因素

在视频处理的过程中,编码解码及码率是影响视频清晰度的关键因素。今天,我们将深入探讨这些概念,并解析它们如何共同作用于视频质量。 编码解码概述 编码,简单来说,就是压缩。视频编码的目的是将原始视频数据压缩成较…

grid网格布局

使用flex布局的痛点 如果使用justify-content: space-between;让子元素两端对齐,自动分配中间间距,假设一行4个,如果每一行都是4的倍数那没任何问题,但如果最后一行是2、3个的时候就会出现下面的状况: /* flex布局 两…

Vehicle HAL(2)--Vehicle HAL 的启动

目录 1. VehicleService-main 函数分析 2. 构建EmulatedVehicleHal 2.1 EmulatedVehicleHal::EmulatedVehicleHal(xxx) 2.2 EmulatedVehicleHal::initStaticConfig() 2.3 EmulatedVehicleHal::onPropertyValue() 3. 构建VehicleEmulator 4. 构建VehicleHalManager (1)初…

【C语言】详解 指针

前言: 在学习指针前,通过比喻的方法,让大家知道指针的作用。 想象一下,你在一栋巨大的图书馆里找一本书。如果没有书架编号和目录,这几乎是不可能完成的任务。 在 C 语言中,指针就像是图书馆的索引系统&…

RabbitMQ仲裁队列高可用架构解析

#作者:闫乾苓 文章目录 概述工作原理1.节点之间的交互2.消息复制3.共识机制4.选举领导者5.消息持久化6.自动故障转移 集群环境节点管理仲裁队列增加集群节点重新平衡仲裁队列leader所在节点仲裁队列减少集群节点 副本管理add_member 在给定节点上添加仲裁队列成员&…

Apache Kafka 实现原理深度解析:生产、存储与消费全流程

Apache Kafka 实现原理深度解析:生产、存储与消费全流程 引言 Apache Kafka 作为分布式流处理平台的核心,其高吞吐、低延迟、持久化存储的设计使其成为现代数据管道的事实标准。本文将从消息生产、持久化存储、消息消费三个阶段拆解 Kafka 的核心实现原…

Python 训练营打卡 Day 41

简单CNN 一、数据预处理 在图像数据预处理环节,为提升数据多样性,可采用数据增强(数据增广)策略。该策略通常不改变单次训练的样本总数,而是通过对现有图像进行多样化变换,使每次训练输入的样本呈现更丰富…

leetcode付费题 353. 贪吃蛇游戏解题思路

贪吃蛇游戏试玩:https://patorjk.com/games/snake/ 问题描述 设计一个贪吃蛇游戏,要求实现以下功能: 初始化游戏:给定网格宽度、高度和食物位置序列移动操作:根据指令(上、下、左、右)移动蛇头规则: 蛇头碰到边界或自身身体时游戏结束(返回-1)吃到食物时蛇身长度增加…

CCPC dongbei 2025 I

题目链接:https://codeforces.com/gym/105924 题目背景: 给定一个二分图,左图编号 1 ~ n,右图 n 1 ~ 2n,左图的每个城市都会与右图的某个城市犯冲(每个城市都只与一个城市犯冲),除…

系统性学习C语言-第十三讲-深入理解指针(3)

系统性学习C语言-第十三讲-深入理解指针(3) 1. 数组名的理解2. 使用指针访问数组3. ⼀维数组传参的本质4. 冒泡排序5. ⼆级指针 6. 指针数组7. 指针数组模拟二维数组 1. 数组名的理解 在上⼀个章节我们在使用指针访问数组的内容时,有这样的代…