uniapp 点击两次底部tabbar 回到顶部

汤圆(dumpling)

于 2021-05-27 19:17:10 发布

阅读量1.2k

点赞数 2

分类专栏： uniapp vue 文章标签： vue uni-app javascript

本文链接：https://blog.youkuaiyun.com/m0_47668952/article/details/117335718

版权

vue 同时被 2 个专栏收录

15 篇文章

订阅专栏

uniapp

9 篇文章

订阅专栏

这个博客介绍了一种在200毫秒内判断用户是否双击TabBar的方法，如果双击则触发页面返回顶部的功能。通过在data中设置`tabClick`状态，并在`onTabItemTap`事件中利用setTimeout来判断是否为双击。当用户在短时间内连续点击同一Tab，会执行`toTop`方法，使用uni.pageScrollTo将页面滚动到顶部。

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

tabClick: false, // true 表示是两次点击中的第一次点了 tabBar（写在data里面）
onTabItemTap(e) {
			if (e.index==0&&this.tabClick) { // 200ms 内再次点击
				// 这里就是模拟的双击事件，可以写类似数据刷新相关处理
				this.toTop();
			}
			this.tabClick = true
			setTimeout(() => {
				this.tabClick = false // 200ms 内没有第二次点击，就当作单击
			}, 200)
		},
		// 返回顶部（写在methods里面）
			toTop() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 100,
				});
			},