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

news2024/11/24 2:23:23

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官网

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

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

相关文章

微信保存到本地的视频文件怎么转存到手机笔记?

微信是人们之间交流的重要工具。我们经常会在微信上收到一些珍贵的视频文件,比如亲友们的生活片段、孩子们的成长瞬间等等。但是,随着时间的推移,这些视频文件会越来越多,也会有人担心它们的保存问题。 现在很多人都在使用手机笔…

磁盘0和磁盘1

磁盘0和磁盘1 查看磁盘情况磁盘0和磁盘1的区别 查看磁盘情况 此电脑,右键,管理,然后就可以看到计算机管理这个页面 计算机管理页面,存储,磁盘管理,就可以看到磁盘情况了 磁盘0和磁盘1的区别 磁盘0和磁…

【前端进阶】什么是AST?什么是ESLint?如何快速发布自定义ESLint插件?

文章目录 什么是ASTAST在线可视化网站代码如何转化ASTacorn基本使用 什么是ESLintESLint解析原理如何制作ESLint插件安装yeoman创建插件创建规则目录结构实现警告console.error()方法 npm发布如何注册如何登录发布应用问题 nrm下载查看可用镜像源切换镜像源 结束参考文章 什么是…

ChatGPT会让软件测试人员失业吗?

首先,正视ChatGPT ,它只是一款提升测试效率的工具,并不会让测试失业 ChatGPT 本质上就是一个搜索引擎的二次封装,它更能理解你的输入意图,它更精确的帮你拼接返回结果。但它就是一个辅助工具,用好了可以帮…

传统主从配置

传统主从配置 MySQL通过二进制文件写入和恢复数据 主服务器一定要打开二进制日志 必须两台服务器(或者是多个实例) 从服务器需要一次数据初始化 如果主从服务器都是新搭建的话,可以不做初始化 如果主服务器已经运行了很长时间了,可…

从Word Embedding到Bert模型—自然语言处理中的预训练技术发展史

Bert最近很火,应该是最近最火爆的AI进展,网上的评价很高,那么Bert值得这么高的评价吗?我个人判断是值得。那为什么会有这么高的评价呢?是因为它有重大的理论或者模型创新吗?其实并没有,从模型创新角度看一般,创新不算大。但是架不住效果太好了,基本刷新了很多NLP的任务…

web服务端接收多用户并发上传同一文件,保证文件副本只存在一份(附go语言实现)

背景 对于一个文件服务器来说,对于同一文件,应该只保存一份在服务器上。基于这个原则,引发出本篇内容。 本篇仅阐述文件服务器在同一时间接收同一文件的并发问题,这种对于小体量的服务来说并不常见,但是最好还是要留…

存储协议——FC协议讲解

目录 FC基础概念 FC协议结构 FC通信 FC交换网络工作流程:(以封装SCSI协议为例) FC拓扑结构 FC协议的端口类型 FC适配器(FC HBA卡) FC基础概念 FC最开始为一种传输协议,由于其性能较高,逐…

我的小流量“转正”心得 --- 下载下方深度语义重排的实践

目录 一、背景 二、通过数据分析找到的问题 三、迭代流程 迭代一: 迭代二: 迭代三: 迭代成功的原因: 知识扩展 四、hnswlib调优过程 五、附录 5.1 hnsw 超参选择 一、背景 在分发中下载带来的收入占比排列仅次于搜索。…

重磅|2024年浙大MPA提前批面试政策公布:申请三步走

说曹操曹操到!昨天还在说浙大MPA提面吃迟迟未公布的事情,晚些时候就来了!等待许久的MPA考生们可以开始着手筹划自己的提面备考了!提前批面试真题周期较长,但是需要做准备的内容确实也不少,本期专注浙大的杭…

如何区分bin log 、redo log 跟 undo log?

概要 MySQL 日志包含了错误日志、查询日志、慢查询日志、事务日志、二进制日志等,如果存储引擎使用的是 InnoDB ,二进制日志(binlog)和事务日志(包括redo log和undo log) 是肯定绕不过去的,本篇接下来详细为大家介绍这三种日志。 redo log 为…

Android OpenGL ES实现简单绿幕抠图

目录 正文 OES FilterBlendShader Filter最后的效果缺陷 正文 实现绿幕抠图,其实想法很简单。 这里简单粗暴的使用着色器替换。 OES Filter 直接实现在相机预览上的Shader ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 #extension GL_OE…

Spring Boot 中的 Sleuth 是什么, 如何使用

Spring Boot 是一个非常流行的 Java Web 开发框架,它提供了许多方便的功能,其中之一就是 Sleuth。Sleuth 是一个分布式跟踪系统,用于跟踪应用程序中的请求和操作。在本文中,我们将探讨 Spring Boot 中的 Sleuth 是什么&#xff0c…

git 新建分支,切换分支,上传到远程分支

git 在使用的过程中,有的时候我们需要更换一个分支才存贮数据,作为版本的一个迭代或者是阶段性成果的一个里程碑。 如何来做操作呢? 在git中,可利用checkout命令转换分支,该命令的作用就是切换分支或恢复工作树文件&a…

Linux串口应用编程——STM32MP157

文章目录 替换设备树文件串口API设置行规程struct termios 结构体行规程函数 串口应用——回环 替换设备树文件 挂载boot分区: mount /dev/mmcblk2 /boot拷贝新的设备树文件到boot分区 cp /mnt/stm32mp157c-100ask-512d-lcd-v1.dtb /bootreboot重启,查…

C++ set和map使用

搜索平衡二叉树的封装 1. 关联容器2. 键值对3. 树形结构的关联式容器3.1 set3.1.1 set介绍3.1.2 set 的使用1. set模板参数列表2. set的构造3. set 的迭代器4. set的容量5. set修改5. set的使用 3.2 multiset3.2.1 multiset的介绍3.2.1 multiset的使用 3.3 map3.3.1 map的介绍3…

Could not load the Qt platform plugin “xcb“

qt.core.plugin.loader: QLibraryPrivate::loadPlugin failed on “/home/ly/Qt/6.5.1/gcc_64/plugins/platforms/libqxcb.so” : “Cannot load library /home/ly/Qt/6.5.1/gcc_64/plugins/platforms/libqxcb.so: (libxcb-cursor.so.0: cannot open shared object file: No su…

VTK8.2手动卸载

利用源代码方式安装的VTK, 进行手动卸载[参考] 1、进入.. /VTK-8.2.0/build目录 make2、记录sudo make install的log log在uninstall.sh文件中 touch uninstall.sh && chmod 775 uninstall.sh && echo #!/bin/bash -v > uninstall.sh && sudo m…

【unity实战】制作俯视角射击游戏多种射击效果(一)

文章目录 本期目标前言欣赏开始1. 角色移动和场景搭建2. 绑定枪械2.1 首先将各种枪械的素材添加给人物作为子物体2.2 给枪械也分别添加两个子物体用作标记枪口和弹仓位置 3. 枪械动画4. 切换枪械5. 发射功能5.1 手枪(1) 枪械随着鼠标旋转(2) 射击时间间隔(3) 创建好子弹、弹壳和…

手把手教你如何做手机PCB电磁兼容性设计

电磁兼容性是指电子设备在各种电磁环境中仍能够协调、有效地进行工作的能力。电磁兼容性设计的目的是使电子设备既能抑制各种外来的干扰,使电子设备在特定的电磁环境中能够正常工作,同时又能减少电子设备本身对其它电子设备的电磁干扰。 1、选择合理的导…