mui技术点02.双击header头部,画面回至顶部


做的项目若干画面页面展示数据很长,如想回到画面顶部需要用户手动划瓶到顶端,于是添加双击header头部,画面回至顶部的功能。

header上添加ID


开启双击事件

doubletap默认为关闭,如果是双击操作,需要开启;单击就不用了。

//mui初始化
mui.init({
	gestureConfig:{
		doubletap: true,
	}
});

添加JS监听代码

添加到mui.plusReady()中。

//双击回到顶部
document.getElementById("header").addEventListener("tap",function(){
	//mui.toast("doubletap");
	//判断当前的视图的位置   如果滚动了,才能返回顶部
	if(window.pageYOffset >= window.innerHeight){
		mui.scrollTo(0,300);
	}
})

画面最底端添加提示

双击标题栏,画面自动返回顶部呦!

相关