小程序点击导航栏返回顶部小例子

最新推荐文章于 2023-12-24 09:23:46 发布

码上流星&洒下星辰

最新推荐文章于 2023-12-24 09:23:46 发布

阅读量386

点赞数 3

分类专栏：小程序知识/功能大总结 uni-app 文章标签：小程序

张砚博

本文链接：https://blog.csdn.net/qq_47272950/article/details/130701030

版权

小程序知识/功能大总结同时被 2 个专栏收录

34 篇文章 3 订阅

订阅专栏

uni-app

21 篇文章 1 订阅

订阅专栏

该文章讲述了如何使用Vue的<view>组件创建一个顶部导航栏，并通过监听@click事件，结合uni-app的API实现300ms内双击导航栏时页面自动平滑滚动到顶部的功能。利用uni.getSystemInfoSync获取屏幕高度，确保导航栏布局正确。

摘要由CSDN通过智能技术生成

在这里插入图片描述

<view class="headerTop"  id="headerTop" @click="onNavigationBarTap">
	顶部导航栏
</view>
//样式
width: 100%;
position: fixed;
background: white;
left: 0;
z-index: 999;

//js
 lastTapTime: null,//用于记录上一次点击的时间戳
 screenHeight: 0//高度设置为0
onLoad(){
	//获取屏幕高度
	const systemInfo = uni.getSystemInfoSync();
	this.screenHeight = systemInfo.windowHeight;
},
methods:{
	//在导航栏上添加一个@click事件的监听函数，判断两次点击的时间间隔是否小于300ms，如果是，则认为是双击事件，执行页面滚动到顶部的操作。
			onNavigationBarTap(event){
				 const currentTimeStamp = event.timeStamp;
				 const lastTimeStamp = this.lastTapTime || 0;
				 const timeDiff = currentTimeStamp - lastTimeStamp;
				 if (timeDiff < 300) { // 双击事件
				     uni.pageScrollTo({
				     scrollTop: 0,
				     duration: 300
				   });
				 }
				  this.lastTapTime = currentTimeStamp;
			},
}