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

最新推荐文章于 2024-04-03 09:56:59 发布
最新推荐文章于 2024-04-03 09:56:59 发布
阅读量5.6k 收藏 9
点赞数 2
分类专栏： uni、vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xulihua_75/article/details/127864230
版权

uni-app TabBar 动态设置 样式切换 前端开发
关键词由CSDN通过智能技术生成

一、简介

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

耶啵奶膘
关注
  • 2
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
uniapp小程序自定义动态tabbar
04-08
uniapp小程序自定义动态tabbar
uniapp 监听原生tabbar 点击跳转事件
最新发布
weixin_44881623的博客
06-07 350
【代码】uniapp 监听原生tabbar 点击跳转事件。
uni-app 配置tabBar 中间按钮，以及监听点击事件
qq_44467976的博客
02-06 1万+
uni-app 配置tabBar 中间按钮，以及监听点击事件 前提条件：中间按钮 仅在 tabBar的 list 项为偶数时有效；即当有2或4个按钮时有效 midButton 属性说明 属性 类型 必填 默认值 描述 width String 否 80px 中间按钮的宽度，tabBar 其它项为减去此宽度后平分，默认值为与其它项平分宽度 height String 否 50...
uniapp点击tabbar之前做判断
2401_82373036的博客
01-02 734
在上述代码中，handleTabBarClick 方法会在点击 tabBar 时被触发，它接收一个参数 item，其中包含了被点击的 tabBar 的相关信息，例如 pagePath、text、iconPath 和 selectedIconPath。在这个方法中可以根据需要做相应的判断，例如判断用户是否已登录，如果没有登录则跳转到登录页面并阻止跳转到我的页面。需要注意的是，如果需要阻止跳转，则需要在方法末尾返回 false。
uniapp中tabbar导航的点击事件
qq_44866810的博客
10-12 2196
如果想在App端实现点击某个tabitem不跳转页面，不能使用onTabItemTap。因为该函数在APP端是使用不了的，如果后期想生成多端系统的话就不要使用留坑。可以使用onNavigationBarButtonTap代替。index：点击的序号，从0开始。pagePath：点击页面路径。text：点击按钮文字。
uniapp自定义tabbar图标样式
10-13
uniapp自定义tabbar图标样式uniapp自定义tabbar图标样式
uniapp怎么在点击tabbar之前做判断
qq_54646196的博客
03-13 2986
在这个方法中可以根据需要做相应的判断，例如判断用户是否已登录，如果没有登录则跳转到登录页面并阻止跳转到我的页面。需要注意的是，如果需要阻止跳转，则需要在方法末尾返回。在UniApp中，可以通过监听。时被触发，它接收一个参数。，其中包含了被点击的。
uniapp 使用plus.nativeObj.view实现监听某个tabbarItem的点击来跳转某个页面 ---- 解决方案
weixin_44179923的博客
06-18 1562
需要点击我的，不进入我的，判断是否登录跳转到login页面。tabbar有4个item 原生底部导航。首页 XX XX 我的。
uniapp监听点击的tabbar，然后跳转其他小程序
LY1879276369的博客
04-03 448
在需要监听的tabbar页面写上以下函数。
uni-app案例 仿微信页面（无响应）
06-16
- **页面结构**：使用uni-app的`<navigator>`、`<tabbar>`和`<scroll-view>`等组件来模拟底部导航栏、滑动Tab和滚动内容区域。 - **样式设计**：通过CSS定制主题颜色、字体、间距等，确保视觉效果与微信相似。 - ...
uni-app如何页面传参数的几种方法总结
10-15
本文将详细介绍uni-app页面传参数的几种方法，特别关注`uni.$emit()`和`uni.$on()`的使用，以及它们在实际开发中的应用场景。 首先，`uni.$emit(eventName, OBJECT)`是用来触发全局的自定义事件。你可以向事件中...
几代码实现导航栏透明渐变、实现TabBar中间凸起
11-19
本教程将探讨如何通过几行代码实现导航栏的透明渐变效果以及TabBar中间按钮的凸起设计，这两种特性都能使你的应用程序更加吸引人。我们将主要使用Swift语言进行讲解，同时也适用于使用Storyboard或纯代码布局的应用...
Dcloud底部导航栏（uniapp）.zip
12-02
2. **底部导航栏组件**：uni-app提供了一个名为`<uni-tabbar>`的组件，专门用于实现底部导航栏功能。这个组件允许我们自定义每个tab的图标、文字、选中状态和跳转页面。 3. **配置uni-tabbar**：在页面的`.vue`文件...
uniapp：监听页面跳转到tabbar，进行拦截
sunluyi的博客
03-16 2303
uniapp：监听页面跳转到tabbar，进行拦截
uniapp自定义tabBar
热门推荐
weixin_45785873的博客
03-25 5万+
uniapp自定义tabBar方案 该方案解决的问题有： 1、不在同一个页面切换组件，可路由跳转，刷新页面显示该路由下的页面信息 2、首次
uniapp切换路由监听导航跳转（在监听网络状态时非常常用）
weixin_53339757的博客
12-29 7806
实时监听路由跳转
uni原生导航栏切换监听方法
qq_43628158的博客
01-02 786
uni原生导航栏切换监听方法
uni-app自定义tabBar
09-07
对于uni-app的自定义tabBar，你可以按照以下步骤进行操作： 1. 首先，在uni-app项目的根目录下的`/pages.json`文件中，找到`tabBar`字段，它是一个数组，用来配置底部导航栏的选项卡。 2. 在`tabBar`数组中的每个对象中，可以设置`iconPath`和`selectedIconPath`字段，分别用于指定未选中和选中状态下的图标路径。 3. 你可以在每个选项卡的对象中添加一个自定义字段，比如`custom`，用来表示是否为自定义选项卡。 4. 在页面文件中，你可以通过监听uni-app框架提供的全局事件`uni.switchTab`来实现自定义选项卡的点击事件。 5. 当用户点击自定义选项卡时，你可以通过调用`uni.switchTab`方法并传入目标页面的路径来实现页面跳转。 6. 在目标页面中，你可以展示自定义的选项卡内容，比如自定义样式、图标等。 需要注意的是，uni-app的自定义tabBar只能在小程序平台上生效，在其他平台上可能无法实现自定义效果。另外，uni-app还提供了一些其他配置选项，如文字颜色、背景颜色等，你可以根据需要进行调整。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值