Bootstrap

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

一、简介

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 的整体样式

悦读

道可道，非常道；名可名，非常名。 无名，天地之始，有名，万物之母。 故常无欲，以观其妙，常有欲，以观其徼。 此两者，同出而异名，同谓之玄，玄之又玄，众妙之门。

最新收录
Base64的编码以及解码
echarts表格圆环图配置
c++ 指针详解
vscode终端(控制台)字间距离过大(全网最细) 注意:要带上单引,不然不生效!!!
印刷电路板(pcb)设计与制作(第2版)pdf_北京印刷线路板报价-万创兴电子
springboot毕设 公交车路线查询系统 程序+论文
npm、cnpm、yarn、pnpm区别以及pnpm 是凭什么对 npm 和 yarn 降维打击的
linux 搭建sentinel
关于多级分类查询展示的方法
黑客入门：2024年自学笔记与心得
;