uni-app底部导航栏tabBar监听变化以及变换样式

2023-11-13

一、简介

tabBar有三项，点击后两项变换tabBar的样式

二、案例演示

在这里插入图片描述

三、代码

1.首先，监听tabBar 点击切换,放在这三个页面，和onLoad同级。页面生命周期`onTabItemTap`

**
 * 监听 TabBar 切换点击
 */
onTabItemTap: function(item) {
	console.log(item)
}

2.更改图片路径和汉字

page.json:【默认】

"tabBar": {
	"color": "#E0E3ED",
	"selectedColor": "#ffffff",
	"borderStyle": "white",
	"backgroundColor": "#3A57A1",
	"iconWidth": "18px",
	"spacing": "5px",
	"list": [{
			"pagePath": "pages/index/index",
			"iconPath": "static/tabBarBlue/index1.png",
			"selectedIconPath": "static/tabBarBlue/index2.png",
			"text": "首页"
		},
		{
			"pagePath": "pages/mall/mall",
			"iconPath": "static/tabBarBlue/mall1.png",
			"selectedIconPath": "static/tabBarBlue/mall2.png",
			"text": "商城"
		},
		{
			"pagePath": "pages/mine/mine",
			"iconPath": "static/tabBarBlue/mine1.png",
			"selectedIconPath": "static/tabBarBlue/mine2.png",
			"text": "我的"
		}
	]
},

index.vue

/**
* 监听 TabBar 切换点击
 */
onTabItemTap: function(item) {
	console.log(item)
	// 点击了首页
	if (item.index == 0) {
		console.log("首页");
		uni.setTabBarItem({
			index: 0,
			text: '首页',
			iconPath: 'static/tabBarBlue/index1.png', //图片路径
			selectedIconPath: 'static/tabBarBlue/index2.png' //选中时的图片路径
		})
		uni.setTabBarItem({
			index: 1,
			text: '商城',
			iconPath: 'static/tabBarBlue/mall1.png', //图片路径
			selectedIconPath: 'static/tabBarBlue/mall2.png' //选中时的图片路径
		})
		uni.setTabBarItem({
			index: 2,
			text: '我的',
			iconPath: 'static/tabBarBlue/mine1.png', //图片路径
			selectedIconPath: 'static/tabBarBlue/mine2.png' //选中时的图片路径
		})
		uni.setTabBarStyle({
			color: '#E0E3ED', //tab 上的文字默认颜色
			selectedColor: '#ffffff', //tab 上的文字选中时的颜色
			backgroundColor: '#3A57A1', //tab 的背景色，HexColor
			borderStyle: 'white' //tabBar上边框的颜色， 仅支持 black/white
		})
	}
	// 点击了商城
	if (item.index == 1) {
		console.log("商城");
		uni.setTabBarItem({
			index: 1,
			text: '商城',
			iconPath: 'static/tabBarWhite/mall1.png', //图片路径
			selectedIconPath: 'static/tabBarWhite/mall2.png' //选中时的图片路径
		})
		uni.setTabBarItem({
			index: 0,
			text: '首页',
			iconPath: 'static/tabBarWhite/index1.png', //图片路径
			selectedIconPath: 'static/tabBarWhite/index2.png' //选中时的图片路径
		})
		uni.setTabBarItem({
			index: 2,
			text: '我的',
			iconPath: 'static/tabBarWhite/mine1.png', //图片路径
			selectedIconPath: 'static/tabBarWhite/mine2.png' //选中时的图片路径
		})
		uni.setTabBarStyle({
			color: '#262626', //tab 上的文字默认颜色
			selectedColor: '#35519B', //tab 上的文字选中时的颜色
			backgroundColor: '#ffffff', //tab 的背景色，HexColor
			borderStyle: 'black' //tabBar上边框的颜色， 仅支持 black/white
		})
	}
	// 点击了我的
	if (item.index == 2) {
		console.log("我的");
		uni.setTabBarItem({
			index: 2,
			text: '我的',
			iconPath: 'static/tabBarWhite/mine1.png', //图片路径
			selectedIconPath: 'static/tabBarWhite/mine2.png' //选中时的图片路径
		})
		uni.setTabBarItem({
			index: 0,
			text: '首页',
			iconPath: 'static/tabBarWhite/index1.png', //图片路径
			selectedIconPath: 'static/tabBarWhite/index2.png' //选中时的图片路径
		})
		uni.setTabBarItem({
			index: 1,
			text: '商城',
			iconPath: 'static/tabBarWhite/mall1.png', //图片路径
			selectedIconPath: 'static/tabBarWhite/mall2.png' //选中时的图片路径
		})
		uni.setTabBarStyle({
			color: '#262626', //tab 上的文字默认颜色
			selectedColor: '#35519B', //tab 上的文字选中时的颜色
			backgroundColor: '#ffffff', //tab 的背景色，HexColor
			borderStyle: 'black' //tabBar上边框的颜色， 仅支持 black/white
		})
	}
},

mall.vue

/**
 * 监听 TabBar 切换点击
 */
onTabItemTap: function(item) {
	console.log(item)
	// 点击了首页
	if (item.index == 0) {
		console.log("首页");
		uni.setTabBarItem({
			index: 0,
			text: '首页',
			iconPath: 'static/tabBarBlue/index1.png', //图片路径
			selectedIconPath: 'static/tabBarBlue/index2.png' //选中时的图片路径
		})
		uni.setTabBarItem({
			index: 1,
			text: '商城',
			iconPath: 'static/tabBarBlue/mall1.png', //图片路径
			selectedIconPath: 'static/tabBarBlue/mall2.png' //选中时的图片路径
		})
		uni.setTabBarItem({
			index: 2,
			text: '我的',
			iconPath: 'static/tabBarBlue/mine1.png', //图片路径
			selectedIconPath: 'static/tabBarBlue/mine2.png' //选中时的图片路径
		})
		uni.setTabBarStyle({
			color: '#E0E3ED', //tab 上的文字默认颜色
			selectedColor: '#ffffff', //tab 上的文字选中时的颜色
			backgroundColor: '#3A57A1', //tab 的背景色，HexColor
			borderStyle: 'white' //tabBar上边框的颜色， 仅支持 black/white
		})
	}
	// 点击了商城
	if (item.index == 1) {
		console.log("商城");
		uni.setTabBarItem({
			index: 1,
			text: '商城',
			iconPath: 'static/tabBarWhite/mall1.png', //图片路径
			selectedIconPath: 'static/tabBarWhite/mall2.png' //选中时的图片路径
		})
		uni.setTabBarItem({
			index: 0,
			text: '首页',
			iconPath: 'static/tabBarWhite/index1.png', //图片路径
			selectedIconPath: 'static/tabBarWhite/index2.png' //选中时的图片路径
		})
		uni.setTabBarItem({
			index: 2,
			text: '我的',
			iconPath: 'static/tabBarWhite/mine1.png', //图片路径
			selectedIconPath: 'static/tabBarWhite/mine2.png' //选中时的图片路径
		})
		uni.setTabBarStyle({
			color: '#262626', //tab 上的文字默认颜色
			selectedColor: '#35519B', //tab 上的文字选中时的颜色
			backgroundColor: '#ffffff', //tab 的背景色，HexColor
			borderStyle: 'black' //tabBar上边框的颜色， 仅支持 black/white
		})
	}
	// 点击了我的
	if (item.index == 2) {
		console.log("我的");
		uni.setTabBarItem({
			index: 2,
			text: '我的',
			iconPath: 'static/tabBarWhite/mine1.png', //图片路径
			selectedIconPath: 'static/tabBarWhite/mine2.png' //选中时的图片路径
		})
		uni.setTabBarItem({
			index: 0,
			text: '首页',
			iconPath: 'static/tabBarWhite/index1.png', //图片路径
			selectedIconPath: 'static/tabBarWhite/index2.png' //选中时的图片路径
		})
		uni.setTabBarItem({
			index: 1,
			text: '商城',
			iconPath: 'static/tabBarWhite/mall1.png', //图片路径
			selectedIconPath: 'static/tabBarWhite/mall2.png' //选中时的图片路径
		})
		uni.setTabBarStyle({
			color: '#262626', //tab 上的文字默认颜色
			selectedColor: '#35519B', //tab 上的文字选中时的颜色
			backgroundColor: '#ffffff', //tab 的背景色，HexColor
			borderStyle: 'black' //tabBar上边框的颜色， 仅支持 black/white
		})
	}
},

mine.vue

/**
* 监听 TabBar 切换点击
 */
onTabItemTap: function(item) {
	console.log(item)
	// 点击了首页
	if (item.index == 0) {
		console.log("首页");
		uni.setTabBarItem({
			index: 0,
			text: '首页',
			iconPath: 'static/tabBarBlue/index1.png', //图片路径
			selectedIconPath: 'static/tabBarBlue/index2.png' //选中时的图片路径
		})
		uni.setTabBarItem({
			index: 1,
			text: '商城',
			iconPath: 'static/tabBarBlue/mall1.png', //图片路径
			selectedIconPath: 'static/tabBarBlue/mall2.png' //选中时的图片路径
		})
		uni.setTabBarItem({
			index: 2,
			text: '我的',
			iconPath: 'static/tabBarBlue/mine1.png', //图片路径
			selectedIconPath: 'static/tabBarBlue/mine2.png' //选中时的图片路径
		})
		uni.setTabBarStyle({
			color: '#E0E3ED', //tab 上的文字默认颜色
			selectedColor: '#ffffff', //tab 上的文字选中时的颜色
			backgroundColor: '#3A57A1', //tab 的背景色，HexColor
			borderStyle: 'white' //tabBar上边框的颜色， 仅支持 black/white
		})
	}
	// 点击了商城
	if (item.index == 1) {
		console.log("商城");
		uni.setTabBarItem({
			index: 1,
			text: '商城',
			iconPath: 'static/tabBarWhite/mall1.png', //图片路径
			selectedIconPath: 'static/tabBarWhite/mall2.png' //选中时的图片路径
		})
		uni.setTabBarItem({
			index: 0,
			text: '首页',
			iconPath: 'static/tabBarWhite/index1.png', //图片路径
			selectedIconPath: 'static/tabBarWhite/index2.png' //选中时的图片路径
		})
		uni.setTabBarItem({
			index: 2,
			text: '我的',
			iconPath: 'static/tabBarWhite/mine1.png', //图片路径
			selectedIconPath: 'static/tabBarWhite/mine2.png' //选中时的图片路径
		})
		uni.setTabBarStyle({
			color: '#262626', //tab 上的文字默认颜色
			selectedColor: '#35519B', //tab 上的文字选中时的颜色
			backgroundColor: '#ffffff', //tab 的背景色，HexColor
			borderStyle: 'black' //tabBar上边框的颜色， 仅支持 black/white
		})
	}
	// 点击了我的
	if (item.index == 2) {
		console.log("我的");
		uni.setTabBarItem({
			index: 2,
			text: '我的',
			iconPath: 'static/tabBarWhite/mine1.png', //图片路径
			selectedIconPath: 'static/tabBarWhite/mine2.png' //选中时的图片路径
		})
		uni.setTabBarItem({
			index: 0,
			text: '首页',
			iconPath: 'static/tabBarWhite/index1.png', //图片路径
			selectedIconPath: 'static/tabBarWhite/index2.png' //选中时的图片路径
		})
		uni.setTabBarItem({
			index: 1,
			text: '商城',
			iconPath: 'static/tabBarWhite/mall1.png', //图片路径
			selectedIconPath: 'static/tabBarWhite/mall2.png' //选中时的图片路径
		})
		uni.setTabBarStyle({
			color: '#262626', //tab 上的文字默认颜色
			selectedColor: '#35519B', //tab 上的文字选中时的颜色
			backgroundColor: '#ffffff', //tab 的背景色，HexColor
			borderStyle: 'black' //tabBar上边框的颜色， 仅支持 black/white
		})
	}
},

四、总结

网址：https://uniapp.dcloud.net.cn/api/ui/tabbar.html#settabbaritem
onTabItemTap页面生命周期，点击 tab 时触发

uni.setTabBarItem(OBJECT)
动态设置 tabBar 某一项的内容

uni.setTabBarStyle(OBJECT)
动态设置 tabBar 的整体样式

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

univue

Uniapp

javascript

前端

uni-app底部导航栏tabBar监听变化以及变换样式的相关文章

Jquery 悬停卡

我在用着http designwithpc com Plugins Hovercard http designwithpc com Plugins Hovercard 但我不知道如何在悬停卡上声明 var 每个工作描述都有自己的 ID 当悬
在特定页面上执行 javascript 的正确“Rails”方式

我试图在特定页面上运行 javascript 而我唯一的解决方案似乎是反模式我有controller js内部生成的assets javascripts 我在用着gem jquery turbolinks 我的代码类似于以下内容 docu
Vue 3 Composition API 提供/注入在单文件组件中不起作用

我正在使用 Composition API 在 VueJS 3 中创建一个库我实现了提供注入如中所述docs https v3 vuejs org guide composition api provide inject html i
Angular.js：如何从无序列表中获取 orderBy 或过滤器来工作？

尝试根据价格和评级在返回的对象中进行排序我宁愿用 ng click 和 li 来代替使用选择菜单有没有办法做到这一点我环顾四周这是我能想到的最接近的 ul class restaurant filter li i class i
jQuery .push 到 .get 调用中的数组给出空结果

谁能告诉我为什么下面给我一个空字符串当我console log contentArray in the get 回调函数它显示数据但是当我尝试在下面的代码中执行它时结果为空 sectionArray contentArray func
通过 JavaScript 获取表单名称

我有一个简单的问题但我在网上找不到好的解决方案我有这个 HTML 代码
想要动态处理与分页相关的页码显示：ReactJS

我有一些分页逻辑工作得很好唯一的问题是我只能让它显示并固定数量的页面可供选择现在我已经把它放到了 5 页但我希望它能够根据总记录动态更改假设我有 100 条记录每页限制为 10 条将有 10 页现在我只能让它以这种方式显示第
如何在另一个自定义 Hook 中使用返回值的自定义 Hook？

我正在使用 React native 其中有一个名为的自定义 HookuseUser使用以下方法从 AWS Amplify 获取用户信息Auth getUserInfro方法然后获取返回对象的一部分并用它设置一个状态变量我还有另一个名为
mongodb 聚合 - 累积字段的不同组值

如果我有Player表格文件 name String score Int 我有Group文档其中组代表玩家列表 groupName String players ObjectID 玩家可以属于多个组我想做一个聚合Player文档按以下
改变 JavaScript 中的顶部填充

以下是我在 css 中设置顶部填充的方法 body font size font size px margin 0 padding 100px 0 20px 0 width 100 important 如何使用最简单的 javascript
使用 Google 日历源时如何禁用 FullCalendar 中的活动链接？

我正在使用 FullCalendar 库从 Google 日历加载日历中的事件不幸的是事件添加到日历后它们是可点击的当您点击该活动时您会自动重定向到 Google 日历页面以查看该特定活动或者如果您有足够的访问权限则可以直接对
Vaadin 12 将对象传递给 JavaScript 函数：无法对类进行编码

Vaadin 12 Kotlin 项目 In my myPage html我有JavaScript myObject redirectToCheckout sessionId 1111 2222 所以我需要调用javaScript函数red
如何从浏览器向服务器发送“页面将关闭”消息？

我想向每个 html 文档添加一个脚本 JavaScript 该脚本向服务器发送两条消息页面确实打开了页面将关闭此消息包含页面打开的时间打开消息应在文档加载时或加载完成时发送这是简单的部分 The close message
使用javascript动态更新css内容

需要将 css 更新为动态值我不确定最好的方法是什么 div style zoom 1 div 缩放级别将根据窗口大小调整触发应用程序将相应缩放我将此应用程序加载到 cordova 中并让它在 iPAD 中运行然后我意识到需要使用
$resource.query 返回分割字符串（字符数组）而不是字符串

我正在使用像下面这样的 Angular resource angular module app factory data function resource var Con resource api data update method P
Highcharts jQuery 渲染问题 - 所有浏览器

我在尝试使用构建堆积柱形图时遇到了一个奇怪的问题高图表 http www highcharts com 当图表呈现时在您调整浏览器大小之前不会显示列无论如何导致图表重绘我认为图表的其余部分显示轴标题等但不显示列本身我在 I
使用 Enzyme 测试 `React.createRef` api

我想测试下面的类它使用React createRef api 不过快速搜索并没有发现任何这样做的例子有人成功过吗我该如何嘲笑裁判理想情况下我想使用shallow class Main extends React Component
在 iOS 7 Safari 中，如何区分通过边缘滑动与后退/前进按钮的 popstate 事件？

在 iOS 7 Safari 中现在有两种后退前进导航方式使用底部的传统后退前进按钮箭头或从屏幕边缘滑动我正在使用动画在 ajax 应用程序中的页面之间进行转换但如果用户通过边缘滑动进行导航我不想触发该转换因为这本身就是一个
滚动顶部不符合预期

Note 由于上次忘记奖励而重新开放赏金 A Woff 大师已经给出答案我想在用户展开某一行时到达该行这样当最后一个可见行展开时用户不必向下滚动即可查看内容 I used example tbody on click td green
如何从 json 文件创建模型？（ExtJS）

这是我想使用 json 文件创建的模型 Ext define Users extend Ext data Model fields name user id type int name user name type string 为了根据服

随机推荐

最小二乘曲线拟合——C语言算法实现二

最小二乘曲线拟合在上一篇博客中我们介绍了最小二乘法的原理以及代码实现的例子 http blog csdn net beijingmake209 article details 27565125 本次我们再给出一个程序实现的例子编译环境
解决atibtmon.exe错误

笔记本装好win7之后折腾了一番用驱动精灵更新了所有驱动又装了林林种种的软件继而用QQ管家优化系统后来发现系统在启动时经常报错 atibtmon exe 如下在网上搜了一番有的说重装显卡驱动有的说要重装visual c
XPath crash course note

XPath language What is XPath To be supplied What is XPath for To be supplied Why XPath To be supplied basic concepts exa
exception in thread main java.lang.NoClassDefFoundError wrong name解决方法

初学java时在执行java文件时可能会遇到java代码能编译通过但执行文件时出现 exception in thread main java lang NoClassDefFoundError wrong name的错误当不含包层
linux 清空文件内容的方式

目录一通过重定向来清空文件内容 gt 通过shell重定向null到指定文件即可 gt 重定向或 true 到指定文件二使用cat cp dd使用工具和 dev null设备来清空文件内容 gt 可以使用cat命令查看 dev n
Excel实现数据的线性回归

文章目录一下载安装Excel 二使用Excel做线性回归三验证回归方程的精度四参考资料一下载安装Excel 一般购买的电脑都已经安装好了Microsoft Office 就不需要进行下载安装这一过程百度网盘链接 http
记录一下Object.entries()的用法

Object entries 方法返回一个给定对象自身可枚举属性的键值对数组其排列与使用 for in 循环遍历该对象时返回的顺序一致区别在于 for in 循环还会枚举原型链中的属性语法 Object entries obj 参数
赛车游戏——【极品飞车】（内含源码inscode在线运行）

前言作者主页雪碧有白泡泡个人网站雪碧的个人网站推荐专栏 java一站式服务前端炫酷代码分享 uniapp 从构建到提升从0到英雄 vue成神之路解决算法一个专栏就够了架构咱们从0说数据流通的精妙之道文章目录前言认
MFC ActiveX 接口数据类型，伤不起！

要不是因为我一直在维护一个曲线绘制控件 www st curve cn 我真的很不想再碰MFC的ActiveX了其中怎一个乱字了得回想起来似乎还是vc6最好后来我相继升级到了vc2003 2008 2010 每次升级都让我很受伤注
【机器学习】多分类及多标签分类算法（含源代码）

目录多分类及多标签分类算法一单标签二分类问题 1 1 单标签二分类算法原理二单标签多分类问题 2 1 ovo 2 1 1 手写代码 2 1 2 调用API 2 2 ovr 2 2 1 手写代码 2 2 2 调用API 2 3 Ov
2022年十月份电赛OpenMV巡线方案（2）---主控代码详细分析

前言 1 继上一篇 2022年十月份电赛OpenMV巡线方案详细代码分析 1 2 这个代码适用于所有主控只需要更改一下串口接收部分的API 别问我某某MCU能不能跑的这种废话 3 本文使用的协议与正点原子的串口通讯协议一致看不懂的建议学
当前系统环境打成tar包

当前系统环境打成tar包原文地址 https www cnblogs com alexkn p 3879540 html 命令 tar numeric owner exclude proc exclude sys zcvf centos7
【PlayWright教程（一）】安装和使用（python）

当今常用的三个自动化测试或者爬虫库库 Selenium Puppeteer Playwright JavaScript 支持官方支持官方支持官方支持 Python 异步支持无第三方而且 bug 不少官方支持 Python
使用bibmap修改bib文件中参考文献的期刊或会议名的字母大小写格式为titlecase

使用bibmap方便的修改bib文件中参考文献的期刊或会议名的字母大小写格式为titlecase 1 引言英文语句的字母大小写形式有多种格式常用的格式是全大写 upper case 即句子的所有字母都大写常见于学位论文报告等的封面
system.data.sqlite的源代码下载

帮助文档 http system data sqlite org index html doc trunk www index wiki 历史版本https system data sqlite org index html doc tru
Kendo UI开发教程(14): Kendo MVVM 数据绑定(三) Click

Click绑定可以把由ViewModel定义的方法不绑定到目标DOM的click事件当点击目标DOM元素时触发ViewModel的对应方法例如使用Click绑定 1
Redis有序集合和定时任务解决订单15分钟关闭

直接上代码下单减去库存 public String updatePersonStock PageData pd throws Exception Map
IPSec协议

内容提要 Motivation IP协议的安全缺陷虚拟专用网 IPSec概述协议流程 SPD SAD 数据封装 IPSec AH IPSec ESP 安全参数协商 ISAKMP IKE 一 Motivation 1 1IP协议的安全缺陷
Google Chrome 扩展程序

Adblock Plus 扩展网址 https chrome google com webstore detail adblock plus free ad bloc cfhdojbkjhnklbpkdaibdccddilifddb 官网
uni-app底部导航栏tabBar监听变化以及变换样式

一简介 tabBar有三项点击后两项变换tabBar的样式二案例演示三代码 1 首先监听tabBar 点击切换放在这三个页面和onLoad同级页面生命周期onTabItemTap 监听 TabBar 切换点击 onTab