uni-app 从零开始第三章:底部 tabBar

2023-11-07

pages.json 页面路由 | uni-app官网


一、新建 home页面 

 

  

找到pages目录,新增一个home的页面,勾选上同时新建文件夹 

新建完成后,pages.json 中 会自动添加上刚刚新建的文件信息


二、新增tabBar数据

在 pages.json中新增以下代码

	"tabBar": {
		"color": "#7A7E83",
		"selectedColor": "#007AFF",
		"borderStyle": "black",
		"backgroundColor": "#F8F8F8",
		"list": [{
				"pagePath": "pages/index/index",
				// "iconPath": "static/component.png",
				// "selectedIconPath": "static/componentHL.png",
				"text": "主页"
			},
			{
				"pagePath": "pages/home/home",
				// "iconPath": "static/api.png",
				// "selectedIconPath": "static/apiHL.png",
				"text": "首页"
			}
		]
	}


三、保存运行

保存运行后,重新编译小程序会发现成功添加了 底部菜单 tabBar 

具体要修改相关样式颜色,可以参考官方文档

pages.json 页面路由 | uni-app官网

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

uni-app 从零开始第三章:底部 tabBar 的相关文章

  • 基于FPGA的数字识别实现

    前言 数字识别在我们生活中很常见 比如车牌识别 本篇博客就将介绍数字识别的方法 由于只是研究数字识别的方法 我们就不用硬件平台 而是用Modelsim和Matlab来仿真验证 具体方法如下 我们用画图软件将带有数字的图片截取为640x480
  • 基于SpringCloud的Microservices架构实战案例-在线API管理

    simplemall项目前几篇回顾 1基于SpringCloud的Microservices架构实战案例 序篇 2基于SpringCloud的Microservices架构实战案例 架构拆解 3基于SpringCloud的Microserv
  • 程序员的键盘要不要测试一下?

    键盘是电脑外置设备中易损坏的一种 也是必不可少的电脑配件 特别是程序员每天都需要频繁地使用键盘 键盘常会出现故障 例如失灵或某些字母 数字无法正常输入 这样既浪费时间又令人烦恼 为此 我们在这里提供一个在线测试工具 方便您测试键盘按键是否正
  • Flutter之TextEditingController详解TextField 文件处理

    Flutter里的TextEditingController TextEditingController 是一个可以控制 TextField 和 TextFormField 的控制器 它主要有以下功能 读取和修改 TextField Tex

随机推荐

  • 深度学习神经网络各网络简介及资料汇总 (matlab :deep network designer )

    该介绍包括matlab2022a deepNetworkDesigner 中提供各种预训练的网络模型介绍 SqueezeNet 2016 SqueezeNet是Han等提出的一种轻量且高效的CNN模型 它参数比AlexNet少50x 但模型
  • 如何为python换源

    如何为python换源 一 创建C Users 你的用户名 AppData Roaming pip文件夹 二 在此文件夹下创建pip ini文件 三 在文件中写入 global index url https pypi tuna tsing
  • 多尺度可形变注意力机制MultiScaleDeformableAttn

    该机制来源于Deformable DETR中的技术 https zhuanlan zhihu com p 495941788 https zhuanlan zhihu com p 520666550 https blog csdn net
  • sql外键_SQL外键

    sql外键 When a database table is designed an important factor is to make sure that the table is scalable enough and is nor
  • [Err] 1054 - Unknown column ‘xxx‘ in ‘where clause‘ 异常报错

    Err 1054 Unknown column xxx in where clause 异常报错 1 第一种情况 2 第二种情况 3 第三种情况 在mysql查询语句时运行时 控制台经常会出现 Err 1054 Unknown column
  • CelebA人脸数据集

    CeleA是香港中文大学的开放数据 包含10177个名人身份的202599张图片 并且都做好了特征标记 这对人脸相关的训练是非常好用的数据集 官网链接 网盘链接 别看只是一堆人脸 他们很贴心地做好了特征标记 也就是说 你可以找到类似下面这些
  • python(1): subprocess子进程交互

    个人总结 有错欢迎指出 1 单纯使用popen调用外部程序 stdin write stdout read写入 读取 这两个方法都会等到子进程结束 原因 产生这种现象的原因也非常简单 就是标准输出和标准错误有一个缓存的概念 它不会立即将程序
  • OpenCV——彩色图像添加高斯噪声

    目录 一 高斯噪声 二 C 代码 三 python代码 四 结果展示 1 原始图像 2 添加高斯噪声 一 高斯噪声 高斯分布 也称正态分布 又称常态分布 记为 N 2
  • 尝试进行输出

    今天心看到的概念 学习 认知 我对这个观念有点疑问 不如说 学习和认知有很大练习 可以说我认为 学习是认知的一部分 因此 想要提高学习能力 就可以从提高认知能力入手 所以我去查了一下认知方面的书 把 认知天性 加入到了我的kindle里 费
  • 基于 OpenVINO™ 的 AI 视觉应用基础课学习笔记(一)人工智能发展

    第一讲是概述性的内容 人工智能发展 人工智能概述 人工智能 让机器的行为看起来就像是人所表现出的智能行为一样 图灵测试 一个人在不接触对方的情况下 通过一种特殊的方式 和对方进行一系列的问答 如果在相当长的时间里 他无法根据这些问题判断对方
  • R语言和医学统计学(10):正态性和方差齐性检验

    本文首发于公众号 医学和生信笔记 完美观看体验请至公众号查看本文 医学和生信笔记 专注R语言在临床医学中的使用 R语言数据分析和可视化 文章目录 前言 正态性检验 shapiro wilk检验 kolmogorov smimov检验 方差齐
  • 使用kali破解win7密码

    虚拟机密码忘了 修改启动顺序为CD 设置虚拟机光盘镜像为kali ISO 这里用的是kali 2017 2 开启按f2进入kali live 模式 fdisk l 查看磁盘分区 找到win7虚拟机所使用的磁盘 mount dev sda1
  • 以前的windows安装文件可以删除吗_C盘里的文件夹都有何用?可以删除吗?哪些可以删除?...

    众所周知 C盘里的文件不能随意动 特别重要 那么打开C盘 我们可以在根目录下看到一些特定的文件夹 这些文件夹是干嘛用的呢 里面放着什么东西 哪些可以删除呢 今天蝈蝈就来给大家谈谈这个问题 以下是文件夹名及其介绍 不同系统 不同用户C盘里的文
  • 初识冯诺依曼体系结构

    目录 1 冯诺依曼体系结构 2 冯诺依曼体系的原理 3 数据流向 4 冯诺依曼体系的意义 1 冯诺依曼体系结构 我们常见的计算机 如笔记本 我们不常见的计算机 如服务器 大部分都遵守冯诺依曼体系 1 输入单元 包括键盘 鼠标 扫描仪 写板等
  • .NET混淆器Dotfuscator怎样利用切除和水印保护应用程序?

    Dotfuscator是一个 NET的Obfuscator 它提供企业级的应用程序保护 大大降低了盗版 知识产权盗窃和篡改的风险 Dotfuscator的分层混淆 加密 水印 自动失效 防调试 防篡改 报警和防御技术 为世界各地成千上万的应
  • Html小知识点和sublime部分用法

    主要的开发工具 chrome sublime photoshop 二 web标准有三个标准组成 1 结构标准 结构用于对网页元素进行整理和分类 我们主要学的是HTML 2 表现标准 表现用于设置网页的版式 颜色 大小等外观样式 主要指的是c
  • metaq/rocketmq入门学习

    MetaQ是一款分布式 队列模型的消息中间件 基于发布订阅模式 有Push和Pull两种消费方式 支持严格的消息顺序 亿级别的堆积能力 支持消息回溯和多个维度的消息查询 metaq是rocketmq的开源版本 rocketmq的一些文档 h
  • 创建QT项目

    经过了令人苦恼的版本选择 然后又经历了IDE熟悉以及纯C 应用的创建 接下来终于进入了激动人心的时刻 开启第一个QT项目 使用创建向导创建QT项目 文件 gt 新建文件或项目 选择应用 窗口应用 根据自己的实际情况 配置项目名称和项目保存的
  • 画流程图都可以用哪些工具?

    在日常生活中 我相信我们很多人都看到过流程图 对于设计师来说 它还需要涉及流程图来反映用户的旅程和交互方式 那么你知道哪些流行的流程图设计软件呢 作为高级设计师 我今天推荐10款流程图设计软件 你可以和我一起读这篇文章 即时设计 即时设计是
  • uni-app 从零开始第三章:底部 tabBar

    pages json 页面路由 uni app官网 一 新建 home页面 找到pages目录 新增一个home的页面 勾选上同时新建文件夹 新建完成后 pages json 中 会自动添加上刚刚新建的文件信息 二 新增tabBar数据 在