一文读懂uniapp中的tabBar底部导航

目录

  • 1. 基本知识
  • 2. Demo

1. 基本知识

UniApp 中的 tabBar 是用来在应用程序底部显示可切换的选项卡的组件,通常用于实现底部导航栏

允许用户通过点击不同的选项卡来切换应用程序的不同页面或功能模块

在这里插入图片描述
其代码如下:

"tabBar":{"color":"#FFFFFF","selectedColor":"#007AFF","borderStyle":"black","backgroundColor":"#20222a","position":"bottom","list":[{"pagePath": "pages/index/index","iconPath":"static/index.png","selectedIconPath":"static/index-selected.png","text": "首页"}, {"pagePath": "pages/index/reportPage","iconPath":"static/statistics.png","selectedIconPath":"static/statistics-selected.png","text": "统计"},{"pagePath": "pages/index/morePage","iconPath":"static/more.png","selectedIconPath":"static/more-selected.png","text": "更多"}]
},

对应的组件属性如下:

  • list: tabBar 的列表,每个选项卡都包含了图标、文字和对应的页面路径
  • color:选项卡未被选中时的颜色
  • selectedColor:选项卡被选中时的颜色
  • backgroundColor: tabBar 的背景颜色
  • borderStyle: tabBar 的边框样式
  • position: tabBar 的位置,可选值包括 top(顶部)和 bottom(底部)

2. Demo

设计的整体逻辑如下:

一、在 app.json 文件中配置 tabBar 字段
定义了 tabBar 的整体样式和行为,包括了颜色、选中颜色、边框样式、背景颜色和位置等属性
配置列表中的各个 tabBarItem,指定每个选项卡的页面路径、图标路径、选中图标路径和文字, 能够正确显示并响应用户的点击行为

二、在各个页面的 JSON 配置文件中设置 navigationBarTitleText 字段
确保每个页面能够在顶部显示正确的标题,当用户访问不同的页面时,顶部标题栏将显示相应的标题,提供了良好的用户体验

三、创建对应的页面文件,并编写逻辑和界面
创建了三个页面文件:index.vue、reportPage.vue 和 morePage.vue,并在其中编写了相应的逻辑和界面,文件包含页面的布局、样式和与用户交互的逻辑

四、将 tabBar 的图标和文字资源放置到对应的路径下
为了让 tabBar 能够正确显示图标和文字,将资源放置到项目的指定路径下,例如 static 文件夹,并在 tabBar 的配置中引用这些资源路径,确保 tabBar 能够正确显示各个选项卡的图标和文字

其pages.json如下:

{"easycom": {"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"},"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages{"path" : "pages/login/login","style" :                                                                                    {"transparentTitle":"always"}}],"tabBar":{"color":"#FFFFFF","selectedColor":"#007AFF","borderStyle":"black","backgroundColor":"#20222a","position":"bottom","list":[{"pagePath": "pages/index/index","iconPath":"static/index.png","selectedIconPath":"static/index-selected.png","text": "首页"}, {"pagePath": "pages/index/reportPage","iconPath":"static/statistics.png","selectedIconPath":"static/statistics-selected.png","text": "统计"},{"pagePath": "pages/index/morePage","iconPath":"static/more.png","selectedIconPath":"static/more-selected.png","text": "更多"}]},"globalStyle": {"navigationBarTextStyle": "black","navigationBarTitleText": "equipment-app","navigationBarBackgroundColor": "#F8F8F8","backgroundColor": "#F8F8F8"}
}

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

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

相关文章

Storm入门教程

Storm入门教程 一、Apache Storm简介 Apache Storm是一个免费开源的分布式实时计算系统。Storm可以很容易地可靠地处理大量的数据流,进行实时分析、机器学习、持续性计算、分布式RPC、ETL等操作。Storm非常适用于需要实时分析、在线机器学习、持续计算、分布式远程…

深入解析Rivest Cipher 4:理论与实践

title: 深入解析Rivest Cipher 4:理论与实践 date: 2024/4/17 20:30:58 updated: 2024/4/17 20:30:58 tags: 密码学RC4算法流密码密钥调度安全分析优缺点应用实践 第一章:引言 密码学简介: 密码学是研究如何保护通信和信息安全的学科。它涉…

搜索引擎容易收录的图片尺寸

搜索引擎,如百度,对于图片的收录并没有一个固定的最佳尺寸。然而,根据一些SEO专家和测试者的经验,搜索引擎更可能收录具有以下特点的图片: 图片大小尽量接近121:75的比例,或者以这个比例等比放大&#xff…

# 从浅入深 学习 SpringCloud 微服务架构(一)基础知识

从浅入深 学习 SpringCloud 微服务架构(一)基础知识 1、系统架构演变: 1)单体应用架构。如电商项目。 用户管理、商品管理、订单管理,在一个模块里。 优点:开发简单,快速,适用于…

React中redux、react-redux、@reduxjs/toolkit状态管理库的使用方式

效果 下载依赖 npm install redux react-redux reduxjs/toolkit --save在src目录下创建文件 创建index.ts文件 import { configureStore } from reduxjs/toolkit import userSlice from ./userReducerconst store configureStore({reducer: {user: userSlice.reducer} }) //…

代码随想录算法训练营第四十三天| LeetCode 1049.最后一块石头的重量II、494. 目标和、474.一和零

一、LeetCode 1049.最后一块石头的重量II 文章讲解/视频讲解:https://programmercarl.com/1049.%E6%9C%80%E5%90%8E%E4%B8%80%E5%9D%97%E7%9F%B3%E5%A4%B4%E7%9A%84%E9%87%8D%E9%87%8FII.html#%E6%80%9D%E8%B7%AF 状态:已解决 1.思路 其实这个题跟上个题…

ssm056基于Java语言校园快递代取系统的设计与实现+jsp

校园快递代取系统设计与实现 摘 要 现代经济快节奏发展以及不断完善升级的信息化技术,让传统数据信息的管理升级为软件存储,归纳,集中处理数据信息的管理方式。本校园快递代取系统就是在这样的大环境下诞生,其可以帮助管理者在短…

4核8G配置服务器多少钱?2024年阿里云服务器700元1年价格便宜

4核8G配置服务器多少钱?2024年阿里云服务器700元1年价格便宜。阿里云4核8G服务器租用优惠价格700元1年,配置为ECS通用算力型u1实例(ecs.u1-c1m2.xlarge)4核8G配置、1M到3M带宽可选、ESSD Entry系统盘20G到40G可选,CPU采…

Linux下的权限:论老流氓root的存在

文章目录 用户身份切换提权 权限管理文件访问者文件访问权限文件类型目录权限默认权限粘滞位 用户 Linux下有两中用户:超级用户(root)、普通用户 超级用户:可以在Linux系统下做任何事情,不受到限制普通用户&#xff…

Java PDF文件流传输过程中速度很慢,如何解决?

专栏集锦,大佬们可以收藏以备不时之需: Spring Cloud 专栏:http://t.csdnimg.cn/WDmJ9 Python 专栏:http://t.csdnimg.cn/hMwPR Redis 专栏:http://t.csdnimg.cn/Qq0Xc TensorFlow 专栏:http://t.csdni…

VulnHub系列 DC-4靶机 渗透详细过程 | 红队打靶

VulnHub系列 DC-4靶机详细渗透测试过程 目录 VulnHub系列 DC-4靶机详细渗透测试过程一、将靶机导入到虚拟机当中二、渗透流程主机发现端口扫描Web渗透暴力破解命令执行反弹shellSSH暴力破解提权 一、将靶机导入到虚拟机当中 靶机地址: https://download.vulnhub.c…

Matlab|基于改进遗传算法的配电网故障定位

目录 1 主要内容 2 部分代码 3 部分程序结果 4 下载链接 1 主要内容 该程序复现文章《基于改进遗传算法的配电网故障定位》,将改进的遗传算法应用于配电网故障定位中, 并引入分级处理思想, 利用配电网呈辐射状的特点, 首先把整个配电网划分为主干支路和若干独立…

什么是Transformer架构的自注意力机制?

Transformer模型是什么? Transformer模型是一种基于自注意力机制的深度学习模型,最初由Vaswani等人在2017年提出,并在自然语言处理(NLP)任务中取得了显著的性能提升。与传统的循环神经网络(RNN)…

Golang面试题二(基础类)

目录 1.Go 语言当中 new和make 的作用是什么 2.Printf(), Sprintf(), FprintF() 都是格式化输出,有什么不同? 3.Go 语言当中数组和切片的区别是什么? 数组 切片 区别 4.Go 语言当中值传递和地址传递&#xff08…

中国12.5米DEM地形瓦片数据免费领取!

之前向大家公开了中国34个省12.5米DEM地形瓦片数据的免费领取链接,大家对12.5米DEM数据的使用需求很强烈,领取也很积极,也有不少读者反馈能否提供全国范围的12.5米DEM地形瓦片数据,因为分省级地形瓦片数据想要合并成全国数据&…

Python3:数据校验机制

在日常编码环节,很大比例的错误处理工作和参数的输入有关。当程序里的某些数据直接来自用户输入时,必须先校验这些输入值,再进行之后的处理,否则就会出现难以预料的错误。 需求: 写一个命令行小程序,它要求…

ES-全文搜索

模糊查询: 写数据通过id路由到master分片 查询数据到一个节点,该节点会作为一个调度节点判断负载等情况将请求转发到真正节点(一般し轮询)

提升批量邮箱API发送效率:技巧与策略探讨

批量邮箱API发送邮件时如何提高发送效率?1、优化邮件内容和目标客户列表;2、利用邮件模板和个性化功能;3、合理设置发送时间和频率;4、使用A/B测试和数据分析;5、保持邮件列表更新和清洁。 一、优化邮件内容和目标客户…

CMEF | 澳鹏Appen精彩亮相第89届中国国际医疗器械博览会

4月14日,为期四天的第89届中国国际医疗器械博览会(CMEF)盛大收官。如今,人们的健康需求在人口老龄化等一系列因素的影响下持续增长,这意味着卫生系统也面对着更多具有复杂健康需求的患者。信息化、数字化、智能化已经成…

双指针的引入和深入思考(持续更新中)

目录 1.引入双指针 2.使用场景 3.例题引入 1.引入双指针 当我们需要维护某个区间性质的或者是求满足某些性质的区间的长度时,对于一个区间是由左右端点的,我们有简单的枚举左右端点的O()的时间的做法,当时在大多数题目中是不可行的&#…