uniapp-捕获底部导航栏tabBar切换时点击事件（onTabItemTap）

已于 2023-04-25 14:51:11 修改
阅读量8.4k 收藏 6
点赞数 2
文章标签： uni-app 前端 javascript
于 2023-04-18 10:14:33 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42881768/article/details/130215317
版权
当点击‘导航’时，可以利用页面生命周期事件onTabItemTap来清除首页的一些暂存状态。示例代码是在‘导航’页内定义onTabItemTap方法，实现状态的重置。官方文档提供了onTabItemTap的详细说明。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

【需求】

点击“导航”时，清除“首页”内的一些暂存的状态，如下图：

在这里插入图片描述

【解决】

使用页面生命周期onTabItemTap即可。

示例代码如下：

// 在“导航”页内写入该方法
methods: {
	onTabItemTap() {
		// 您点击了“导航”页...
	},
}

页面生命周期onTabItemTap：官方文档介绍

huangfuyk
关注
uniapp-封装底部导航栏tabbar(第一种方案)
m0_60708088的博客
05-31 288
<template> <view> <index v-if="currentPage == 0" /> <elegant v-if="currentPage == 1" /> <classroom v-if="currentPage == 2" /> <my v-if="currentPage == 3" /> ...
解决Uni-app自定义底部tabber，切换tabbar时，点击两次tabbar才会显示正确，但页面可以正常切换的问题
qq_39210364的博客
06-07 2733
底部tabbar
小程序tab点击监听方法：onTabItemTap()
03-29
page()的详细生命周期，可以查看文档，今天主要说下其onTabItemTap()方法，很少用到，但我们在开发中为了解决一些问题（在此方法中触发登录界面），试用下此方法：   方法说明   Triggered when the user taps the tab if the current page is a tab page（当点击tab界面时触发）   测试代码：   /** tab点击 */ onTabItemTap(item) { console.log(item) wx.showToast({ title: 'tab点击', }) }, /** * 生命周期函数--监听页面显示
uniapp中tabbar导航的点击事件
qq_44866810的博客
10-12 3084
如果想在App端实现点击某个tabitem不跳转页面，不能使用onTabItemTap。因为该函数在APP端是使用不了的，如果后期想生成多端系统的话就不要使用留坑。可以使用onNavigationBarButtonTap代替。index：点击的序号，从0开始。pagePath：点击页面路径。text：点击按钮文字。
【微信小程序 onTabItemTap：精准监听 TabBar 点击事件】
Html_vueJs的博客
03-10 959
是微信小程序中的一个页面生命周期函数，用于监听用户点击TabBar上的某个项时的事件。以下是如何运用。
Uniapp在底部导航栏设置点击事件
h110001的博客
09-12 1024
在retrun里面定义 showModal: false 和 urls: "https://mqtt.hnlhtxgs.com/wap/clerk/home/login", 外部地址。onTabItemTap是主要的，他是一个监听Tab导航栏，可以使用他来刷新页面等；
uniapp 监听原生tabbar 点击跳转事件
weixin_44881623的博客
06-07 1038
【代码】uniapp 监听原生tabbar 点击跳转事件。
uniapp底部导航栏的点击事件
热门推荐
QDXBH的博客
05-20 1万+
当前是tab页，点击底部的tab触发 onTabItemTap(e){ console.log(e) }
uni-app 中 tabBar 点击或单击事件说明以及双击事件模拟
haplant的专栏
06-08 6686
我们在使用 uni-app 开发前端时，如果应用是一个多 tab 应用，可以通过使用官方提供的原生 tabBar 来实现页面导航。本文介绍如何实现 tabBar 单击切换初始化，双击进行页面数据刷新。
uniapp动态底部栏
最新发布
03-23
### 如何在 UniApp 中实现动态底部导航栏 #### 配置静态 TabBar 首先，在 `pages.json` 文件中配置静态的 TabBar，这是动态调整的基础。通过设置 `tabBar.list` 字段来指定各个选项卡的内容及其路径[^3]。 ```json...
UniApp 开发从入门到精通
YunWisdom
01-07 2780
《UniApp开发从入门到精通》不仅是一份学习指南，更是一份帮助您从入门到精通的成长地图。通过系统的学习和实践，您将掌握了 UniApp 的核心知识和开发技巧，并具备了独立开发多端应用的能力。
Tabar的相互切换
09-22
包含5种方法做Tabbar的相互切换
uniapp点击底部tabBar事件效果（整理）
在北风吹起的时候加入我们的队伍 在秋雨到来的时候成为彼此的温暖
07-14 2200
uniapp点击底部tabBar事件效果
uniapp 点击底部tabBar事件
qq_42695727的博客
09-16 3535
<script> export default { data:function() { return{ } }, methods:{ // 直接在页面使用 onBackPress(event){ console.log("监听返回按钮事件",event) uni.switchTab({ url:"../index/index" }) // 此处一定要return为true，否则页面不会返回到指定路径 ret
uniApp的tabbar单击以及双击事件
zcy1005的博客
03-24 1633
【代码】uniApp的tabbar单击以及双击事件。
uniapp的tab栏切换
一个比较懒散的IT男
02-21 405
{{item.name}}
UNIAPP实战项目笔记55 自定义Tabbar并使用Tabbar事件拦截未登录跳转到登录页面
Ggome的博客
12-18 2446
点击购物车和我的的时候需要拦截并验证登录通过验证的直接跳转,为通过验证的跳转到登录页面通过自定义tabbar来实现。
uni-app移动端 tabbar切换
weixin_59527403的博客
09-06 510
uni-app移动端 tabbar切换
uni-app的tabBar用法(自动、点击刷新页面，loading加载框)
weixin_63543108的博客
08-13 9088
url: 'https://www.baidu.com', // 外部网页的URL。url: 'https://www.baidu.com', // 外部网页的URL。url: 'https://www.baidu.com', // 外部网页的URL。// 异步重新设置 src，相当于刷新 web-view。// 在页面重新显示时，刷新 web-view 组件。//给点击tabBar时加一个1s的loading加载框。//点击tabBar自动刷新页面。//点击tabBar自动刷新页面。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值