mui混合开发——双击header头回至顶部

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/qq_38322527/article/details/101760008

一、页面header布局

<header class="mui-bar mui-bar-nav" id="backToTop">
	<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
	<h1 class="mui-title" >列表</h1>
	<a id="add" class="mui-icon mui-icon-plusempty mui-pull-right" href="#addType">
		<font size="3">添加</font>
	</a>
</header>

二、js监听部分

一定需要包含至mui.plusReady()中

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

三、注意几点：

doubletap默认为关闭，如果是双击操作，需要开启。《官方mui事件api》

回至顶部最好追加当前位置的判断

window.pageYOffset >= window.innerHeight

如果是兼容android和ios，请看这边博客《MUI返回顶部功能》