uni-app(1)pages. json和tabBar

第一步 在HBuilderX中新建项目

填写项目名称、确定目录、选择模板、选择Vue版本:3、点击创建

第二步 配置pages.json文件

pages.json是一个非常重要的配置文件,它用于配置小程序的页面路径、窗口表现、导航条样式等信息。

右键点击pages,按照如下操作 

效果如下图:

 

my.vue文件代码:

<template><view>页面内容</view>
</template><script>export default {data() {return {}},methods: {}}
</script><style></style>

第三步 在pages.json文件中配置tabBar

{"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages{"path": "pages/index/index","style": {"navigationBarTitleText": "首页"}},{"path" : "pages/my/my","style" : {"navigationBarTitleText" : "我的"}}],"globalStyle": {"navigationBarTextStyle": "white",//修改首页上方文字颜色"navigationBarTitleText": "首页","navigationBarBackgroundColor": "#27BA9B",//修改首页的背景颜色"backgroundColor": "#F8F8F8"},"tabBar": {"selectedColor": "#27BA9B","list": [{"pagePath": "pages/index/index","text": "首页","iconPath": "static/logo.png","selectedIconPath": "static/logo.png"},{"pagePath": "pages/my/my","text": "我的","iconPath": "static/logo.png","selectedIconPath": "static/logo.png"}]},"uniIdRouter": {}
}

最后进行预览,如图所示:

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

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

相关文章

Leetcode刷题详解——打家劫舍 II

1. 题目链接&#xff1a;213. 打家劫舍 II 2. 题目描述&#xff1a; 你是一个专业的小偷&#xff0c;计划偷窃沿街的房屋&#xff0c;每间房内都藏有一定的现金。这个地方所有的房屋都 围成一圈 &#xff0c;这意味着第一个房屋和最后一个房屋是紧挨着的。同时&#xff0c;相邻…

虚拟机里为什么桥接模式可以广播,NAT模式不能广播?

在虚拟机网络配置中&#xff0c;桥接模式&#xff08;Bridged mode&#xff09;允许虚拟机在与主机相同的网络上作为一个独立的设备出现。这意味着虚拟机可以接收和发送广播消息&#xff0c;就像物理机器一样&#xff0c;因为它们处于同一个物理网络上。 相反&#xff0c;NAT模…

2437. 有效时间的数目

2437. 有效时间的数目 Java&#xff1a;回溯 class Solution {int res 0;public int countTime(String time) {char[] arr time.toCharArray();dfs(arr, 0);return res;}public void dfs(char[] arr, int pos) {if (pos arr.length) {if (check(arr)) {res;}return;}if (ar…

解决龙芯loongarch64服务器编译安装Python后yum命令无法使用的问题“no module named ‘dnf‘”

引言 在使用Linux系统时,我们经常会使用yum来管理软件包。然而,有时候我们可能会遇到yum不可用的情况,其中一个原因就是Python的问题。本文将介绍Python对yum可用性的影响,并提供解决方案。 问题引发 正常情况下,安装linux系统后,yum命令是可用状态,升级Python版本后,…

SVG直线 <line>与折线 <polyline>代码示例

本专栏是汇集了一些HTML常常被遗忘的知识&#xff0c;这里算是温故而知新&#xff0c;往往这些零碎的知识点&#xff0c;在你开发中能起到炸惊效果。我们每个人都没有过目不忘&#xff0c;过久不忘的本事&#xff0c;就让这一点点知识慢慢渗透你的脑海。 本专栏的风格是力求简洁…

多种方式解决交叉编译中glibc版本不兼容导致的编译问题(libc.so.6: version `GLIBC_xxx‘ not found问题)

目录 背景 开始动手! 第一种 第二种 第三种 背景 一个常见的问题就是: 拿到客户的开发板后需要验证自己本地搭建的交叉编译环境是否正确,这影响到后续的开发. glibc就是指libc.so.6这个动态库,libc.so.6软链接到实际的动态库. 开始动手! 在开发板上,如果有例子比如说可执…

iceoryx(冰羚)-通信中间件解析

iceoryx(冰羚)-简介 iceoryx(冰羚)-Architecture iceoryx(冰羚)-Service Discovery iceoryx(冰羚)-examples-callbacks iceoryx(冰羚)-Listener设计 [iceoryx(冰羚)-ipc消息通信] [iceoryx(冰羚)-共享内存实现]

Python程序设计基础2

第1关:HUT开学了: # 请在此添加代码 Name = input() # 输入学生的姓名 ########## Begin ########## print("|++++++++++++++++++++++|") print("| |") print("| Welcome to HUT |") print("| …

猫罐头品牌排行榜盘点!猫罐头哪个牌子好?

很多猫主人会发现他们家的猫咪可能对猫粮感到腻了&#xff0c;或者猫咪平时不爱喝水&#xff0c;还有一些主人可能会注意到猫咪太瘦了&#xff0c;想尝试给它们添加一些猫罐头&#xff0c;但又不确定如何选择。目前市场上的猫罐头品牌众多&#xff0c;确实让人有些困惑。那么&a…

K8S(一)

一、kubernetes 概述 1、kubernetes 基本介绍 kubernetes&#xff0c;简称 K8s&#xff0c;是用 8 代替 8 个字符“ubernete”而成的缩写。是一个开源的&#xff0c;用于管理云平台中多个主机上的容器化的应用&#xff0c;Kubernetes 的目标是让部署容器化的 应用简单并且高效…

LVGL 像文字一样,显示任意自定义符号

颜色可以在程序中设定,符号的C数组生成 这种应用非常适合类似汽车仪表盘中,有很多行业内特定符号需要显示的场景,而且符号需要根据情况改变颜色。网上这方面基本没有资料,本文是作者根据LVGL自定义字库的源代码修改来实现的。 使用工具: 设置:(根据液晶屏不同可能不同…

Python ElementTree 导出 xml 缺少 开头声明【Pymssql】使用cursor.fetchall()获取执行结果时中文乱码

python 在调用ElementTree的write方法写入xml时&#xff0c;参数里增加 encoding‘utf-8’ 以及 xml_declarationTrue et_root.write(filename.xml, encodingutf-8, xml_declarationTrue)中文乱码问题&#xff1a; Python的pymssql库连接SQL Sever&#xff0c;执行查询语句后&…

Git详解

Git是一个开源的分布式版本控制系统&#xff0c;常用于软件开发中对代码版本管理。Git具有版本控制、协作开发、分支管理、代码审查等功能&#xff0c;能够记录每次代码修改的内容和时间&#xff0c;并能够回滚到任意历史版本&#xff0c;方便团队协作和代码维护。 Git的基本概…

ubuntu20.04中编译zlib1.2.11(源码编译)

1. 安装cmake-gui 2. 下载并解压zlib-1.2.11&#xff0c;在解压得到的文件夹内部创建一个“build”文件夹。 3. 打开cmake-gui&#xff0c;配置zlib1.2.11的configure文件&#xff08;主要编辑build路径&#xff0c;安装路径&#xff0c;以及其他依赖选项&#xff09;&#x…

2311rust过程宏的示例

原文 Rust2018中的过程宏 在Rust2018版本中,我最喜欢的功能是过程宏.在Rust中,过程宏有着悠久而传奇的历史(并继续拥有传奇的未来!) 因为2018年版极大改善了定义和使用它们的体验. 什么是过程宏 过程宏是,在编译时用一段语法,生成新语法的函数.Rust2018中的过程宏有三个风格…

JS:给数字添加千分位符(每3位数用逗号隔开)

背景 如果一串数字的长度太长&#xff0c;就不方便阅读&#xff0c;因此可以采用分隔符对数字进行分割本文的分割规则是&#xff1a; 如果数字的长度大于等于5则进行分割&#xff0c;每3位数用逗号分割开 解决 数字可以分为&#xff1a;number类型的数字和字符串类型的数字&…

前端反卷计划-组件库-03-组件样式

Hi, 大家好&#xff01;我是程序员库里。 今天开始分享如何从0搭建UI组件库。这也是前端反卷计划中的一项。 在接下来的日子&#xff0c;我会持续分享前端反卷计划中的每个知识点。 以下是前端反卷计划的内容&#xff1a; 目前这些内容持续更新到了我的 学习文档 中。感兴趣…

基于yolov5模型的200种鸟类检测识别分析系统

该专栏仅支持购买本专栏的同学学习使用,不支持以超级会员、VIP等形式使用,请谅解!【购买专栏后可选择其中一个完整源码项目】 本文是我新开设的专栏《完整源码项目实战》 的第十三篇全源码文章,包含数据集在内的所有资源,可以实现零基础上手入门学习。前面系列文章链接如下…

uniapp 防抖节流封装和使用

防抖(debounce)&#xff1a;定义一个时间&#xff0c;延迟n秒执行&#xff0c;n秒内再次调用&#xff0c;会重新计时&#xff0c;计时结束后才会再次执行 主要运用场景&#xff1a; 输入框实时搜索&#xff1a;在用户输入内容的过程中&#xff0c;使用防抖可以减少频繁的查询…

【ARM Trace32(劳特巴赫) 使用介绍 5 -- Trace32 ELF 文件加载介绍】

请阅读【ARM Coresight SoC-400/SoC-600 专栏导读】 文章目录 1.1 Trace32 加载符号表1.1.1 ELF 文件加载1.1.2 其它格式文件加载1.1.3 多个 ELF 的加载1.2 Trace32 UEFI 配置1.2.1 x86 32-BIT1.2.2 x86 64-BIT1.2.3 ARM1.1 Trace32 加载符号表 劳特巴赫 TRACE32 可以显示目标…