【uni-app】【01】底部导航栏与页面切换

news2024/12/24 2:19:35

1.(配置文件在哪)uni-app 路由控制是在 pages.json文件中的。

2.(基本配置项有哪些)初学的时候主要有三个配置项,①pagesglobalStyletabbar

image

[!TOC]

接下来主要是对这三个配置项做一个简单介绍。

image

pages

负责页面管理。不需要自己写的,你在项目的pages文件夹下创建页面会自动生成配置项。值得注意的是:如果你后期修改了页面文件的文件名,这里的配置不会自动更新,需要你手动来修改。

具体配置请见下图。

image

上面配置所对应的文件:

image

globalStyle

这个是对顶部导航栏样式的设置

鼠标移动到对应配置项名称上面,会有中文提示告诉你那个配置项啥意思的。(默认当你是使用HbuiderX在进行开发)

image

tabBar

这个是对底部导航栏的设置,你可以参考下面配置

image

这个配置项的名称吧意思很明确,理解起来应该没啥大问题吧。

汇总

在此给出我写的以供参考

文件结构

image

pages.json配置

{
	"pages": [{
		"path": "pages/index/index",
		"style": {
			"navigationBarTitleText": "萌狼工作室"
		}
		},
		{
            "path" : "pages/index/work",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "任务数据",
                "enablePullDownRefresh": false
            }  
        }
        ,{
            "path" : "pages/index/home",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "个人中心",
                "enablePullDownRefresh": false
            }
            
        }
    ],
	"globalStyle": {
		"navigationBarTextStyle": "black",// 导航栏标题颜色
		"navigationBarTitleText": "萌狼工作室",//导航栏标题文字内容
		"navigationBarBackgroundColor": "#F8F8F8",//导航栏背景颜色
		"backgroundColor": "#F8F8F8",//背景颜色
		"app-plus": {
			"background": "#efeff4" //窗体背景色
		}
	},
	"tabBar": {
		"color":"var(--UI-BG)",
		"selectedColor": "#285F44",
		"borderStyle":"",
		"list":[{
			"pagePath": "pages/index/index",//要跳转的页面路径
			"text":"",//文本内容
			"iconPath": "static/icons/首页.svg",//默认图标
			"selectedIconPath": "static/icons/首页select.svg"//被选中的时候的图标
		},
		{
			"pagePath": "pages/index/work",
			"text":"",
			"iconPath": "static/icons/数据中心.svg",
			"selectedIconPath": "static/icons/数据中心select.svg"
		},
		{
			"pagePath": "pages/index/home",
			"text":"",
			"iconPath": "static/icons/个人中心.svg",
			"selectedIconPath": "static/icons/个人中心select.svg"
		}]
	}
}

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

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

相关文章

【Scala入门】scala基础语法:类和对象,变量和常量

上一篇请移步【Scala入门】Scala下载及安装(Windows)以及Idea创建第一个scala项目_水w的博客-CSDN博客 目录 一、Scala 二、Scala基础语法 2.1 注释与标识符规范 2.2 变量与常量 【案例:变量声明和赋值】 2.3 object 【案例&#xff1…

合并二叉树-递归法

1题目 给你两棵二叉树: root1 和 root2 。 想象一下,当你将其中一棵覆盖到另一棵之上时,两棵树上的一些节点将会重叠(而另一些不会)。你需要将这两棵树合并成一棵新二叉树。合并的规则是:如果两个节点重叠…

gdb调试常用指令及案例讲解

文章目录 前言一、常用指令二、案例说明1、测试源文件2、编译和调试 三、其他指令四、案例说明 前言 GDB是一个由GNU开源组织发布的、UNIX/LINUX 操作系统下的、基于命令行的、功能强大的程序调试工具。 GDB 支持断点、单步执行、打印变量、观察变量、查看寄存器、查看堆栈等调…

【JavaEE】_2.文件与IO

目录 1.文件概述 1.1 文件的概念 1.2 文件的存储 1.3 文件的分类 1.4 目录结构 1.5 文件操作 1.5.1 文件系统操作 1.5.2 文件内容操作 2. Java文件系统操作 2.1 File类所处的包 2.2 构造方法 2.3 方法 2.3.1 与文件路径、文件名有关的方法 2.3.2 文件是否存在与普…

Java核心技术 卷1-总结-13

Java核心技术 卷1-总结-13 具体的集合散列集树集队列与双端队列优先级队列 映射基本映射操作 具体的集合 散列集 链表和数组可以有序的存储元素。但是,如果想要查看某个指定的元素,却又忘记了它的位置,就需要访问所有元素,直到找…

vue2数据响应式原理(5) 通过重写函数实现数组响应式监听

其实 我们之前对数组的一个监听 还并不是很完美 我们打开案例 打开 output.js 更改代码如下 import { observe } from "./dataResp" const output () > {var obj {data: {data: {map: {dom: {isgin: true}},arg: 13},name: "小猫猫"},bool: [1,2,3,4…

【经验与Bug】tensorflow草记

文章目录 1 常用小知识2 Learn1) 疑惑未解2) 为何要有"bias"? 3 问题处理1) jupyter的环境指定目录运行jupyter 2) Keras版本3) 为什么accuracy为100%,迭代时参数还在更新? 1 常用小知识 conda activate tf 在anaconda prompt使用&…

Android studio 播放音频文件 播放语速

一、使用 public class MainActivity extends AppCompatActivity {private Hsvolume mHsVolume null;Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);mHsVolume new Hsvolume(th…

【YOLO系列】YOLOv1论文笔记

论文链接:[1506.02640] You Only Look Once: Unified, Real-Time Object Detection (arxiv.org) YOLO将目标检测看作回归问题,使用单个神经网络直接从完整图像上预测边界框和类别概率。(端到端:输入原始数据,输出的是最…

E5EAA HENF105240R1将用于工业生产过程的测量、控制和管理

​E5EAA HENF105240R1将用于工业生产过程的测量、控制和管理 工业控制计算机是工业自动化控制系统的核心设备 工业控制计算机是工业自动化设备和信息产业基础设备的核心。传统意义上,将用于工业生产过程的测量、控制和管理的计算机统称为工业控制计算机,…

SpringBoot整合WebSocket的两种方式及微服务网关Gateway配置

一、说明 项目中后台微服务需要向前端页面推送消息,因此不可避免的需要用到WebSocket技术。SpringBoot已经为WebSocket的集成提供了很多支持,只是WebSocket消息如何通过微服务网关Spring Cloud Gateway向外暴露接口,实际开发过程中遇到了很多…

【数据结构第四章】- 串的模式匹配算法(BF 算法和 KMP 算法/用 C 语言实现)

目录 一、前言 二、BF 算法 三、KMP 算法 3.2.1 - KMP 算法的原理 3.2.2 - KMP 算法的实现 3.2.3 - KMP 算法的优化 创作不易,可以点点赞,如果能关注一下博主就更好了~ 一、前言 子串的定位运算通常称为串的模式匹配或串匹配。此运算的应用非常广…

美国主机的带宽和网络速度究竟有多快?

在选择一个主机时,其带宽和网络速度是非常重要的考虑因素。而美国主机在带宽和网络速度方面有着明显的优势,成为了众多用户的首选。那么,美国主机的带宽和网络速度究竟有多快呢?本文将通过分析美国主机的网络基础设施和数据中心设施&#xf…

golang入门项目——打卡抽奖系统

功能介绍 用户加入群组之后,会在签到群组所设的签到地点进行签到和签退,并限制同一个设备只能签到一个用户,签到成功之后。会获取一定的限制在该群组使用的积分。该群组可以设置一些抽奖活动,用户可使用该群组内的积分来进行该群…

Python+mysql+php搭建另类免费代理池

文章目录 前言:思路:开干:php连接MySQL取ip和端口:效果图: 最后调用代理池:总结: 前言: 为什么说另类的,因为我完全是按照我自己的想法来的,比较鸡肋,但是能用&#xff…

短视频app开发:如何提高视频播放稳定性

简介 如今,短视频已经成为人们日常生活中不可或缺的一部分,而短视频app的开发也日益成为了人们热议的话题。在短视频app开发的过程中,如何提高视频播放稳定性是一个非常重要的问题。本文将从短视频源码角度出发,分享提高短视频ap…

如何优化语音交友app开发的搜索和匹配算法

语音交友app开发的挑战 在当今社交媒体行业中,语音交友app开发已经成为一个热门的领域。越来越多的人开始使用语音交友app来寻找新的朋友,这也为开发者们带来了许多机会。然而,这个领域也面临着一些挑战。其中一个最大的挑战是如何优化搜索和…

掏空腰包,日子难过,机缘转岗软件测试,这100个日夜的心酸只有自己知道...

我今年27岁,原本从事着土木工程相关的工作,19年开始有了转行的想法... 大学刚毕业那年,我由于学的是土木工程专业,自然而然的从事了和土木工程相关的工作,房贷、车贷,在经济的高压下,当代社会许…

大数据题目测试(一)

目录 一、环境要求 二、提交结果要求 三、数据描述 四、功能要求 1.数据准备 2.使用 Spark,加载 HDFS 文件系统 meituan_waimai_meishi.csv 文件,并分别使用 RDD和 Spark SQL 完成以下分析(不用考虑数据去重)。 (1)配置环境…

Java设计模式-day01

1,设计模式概述 1.1 软件设计模式的产生背景 "设计模式"最初并不是出现在软件设计中,而是被用于建筑领域的设计中。 1977年美国著名建筑大师、加利福尼亚大学伯克利分校环境结构中心主任克里斯托夫亚历山大(Christopher Alexand…