f***@126.com
f***@126.com
  • 发布:2022-01-04 14:40
  • 更新:2022-01-04 14:40
  • 阅读:1082

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

分类:MUI
mui

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

header上添加ID

<header class="mui-bar mui-bar-nav" id="header">  
	<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>  
	<h1 id="title" class="mui-title"></h1>  
</header>

开启双击事件

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);  
	}  
})

画面最底端添加提示

<p style="text-align: center;">双击标题栏,画面自动返回顶部呦!</p>

0 关注 分享

要回复文章请先登录注册