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

专注写bug

于 2019-09-30 11:29:03 发布

阅读量324

点赞数

CC 4.0 BY-SA版权

分类专栏： mui-app混合app、插件开发

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

mui-app混合app、插件开发专栏收录该内容

34 篇文章

订阅专栏

本文介绍使用MUI框架进行页面header布局的方法，包括header元素的HTML结构和样式设置。同时，详细讲解如何通过JS监听实现双击回到页面顶部的功能，并给出具体的代码示例。此外，还提供了在不同设备上实现该功能的注意事项。

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

一、页面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返回顶部功能》