js 判断屏幕下拉上滑操作

var startX = startY = endX = endY = 0;

var body = document.getElementById("dind");
body.addEventListener(‘touchstart‘, function(event){
var touch = event.targetTouches[0];
//滑动起点的坐标
startX = touch.pageX;
startY = touch.pageY;
// console.log("startX:"+startX+","+"startY:"+startY);

});
body.addEventListener("touchmove", function(event) {
var touch = event.targetTouches[0];
//手势滑动时,手势坐标不断变化,取最后一点的坐标为最终的终点坐标
endX = touch.pageX;
endY = touch.pageY;
// console.log("endX:"+endX+","+"endY:"+endY);
})
body.addEventListener("touchend", function(event) {

var distanceX = endX - startX,
distanceY = endY - startY;
// console.log("distanceX:"+distanceX+","+"distanceY:"+distanceY);
//移动端设备的屏幕宽度
var clientHeight = document.documentElement.clientHeight;
// console.log(clientHeight;*0.2);
//判断是否滑动了,而不是屏幕上单击了
if(startY != Math.abs(distanceY)) {
//在滑动的距离超过屏幕高度的20%时,做某种操作
if(Math.abs(distanceY) > clientHeight * 0.2) {
//向下滑实行函数someAction1,向上滑实行函数someAction2
distanceY < 0 ? alert("xiangshang") : load();
}
}
startX = startY = endX = endY = 0;
})

后续增加下拉刷新样式

转载:https://www.cnblogs.com/lalalagq/articles/9909206.html

原文地址:https://www.cnblogs.com/yeyuqian/p/12579571.html

时间: 2024-10-10 11:25:18

js 判断屏幕下拉上滑操作的相关文章

权限控制-JS判断是否有权限进行操作跳转页面需要加target

妈蛋的,这问题花了我20分钟,我用来搜索代码花了18分钟,我写代码有个差生的习惯,就是抄,啥东西想做,就上网搜别人杂写,拿下来照抄改一下即可 啧啧,妈蛋的,整个一页,没有我能用到的信息,那些博客内容一毛一样的人,你们难道不动脑子吗,难道是靠凑字数领钱的吗!最恨这种人,你搬可以,但不能不用一下就随便搬.瞅瞅收录的第一页全TM是没用的信息 最后花了2分钟我仔细想了一下,自己搞定了. 方法有很多,也许很low,但确实满足需求了 jsp:  <%        String username =(Str

Android下拉上滑显示与隐藏Toolbar另一种实现

public abstract class RecyclerViewScrollListener extends RecyclerView.OnScrollListener { private static final int SCROLL_DISTANCE = 50; private int totalScrollDistance; private boolean isShow = true; @Override public void onScrollStateChanged(Recycle

js判断是否下拉刷新

if(document.body.scrollTop + window.innerHeight>=document.body.clientHeight-10){ this.loadPointsList(); } //下面这个是用jquery if($(document).scrollTop() + $(window).height() > $(document).height() - 10) { this.loadPointsList(); } document.body.scrollTop用

用js判断屏幕的宽度,改变html字体大小用rem布局

if (document.documentElement.clientWidth > 600) {//页面宽度大于600px让其宽度等于600px,字体大小等于60px,居中 document.documentElement.style.width = "600px"; document.documentElement.style.fontSize = "60px"; document.documentElement.style.margin = "

移动应用滑动屏幕方向判断解决方案,JS判断手势方向

问题分类 滑动屏幕打开相应功能操作. 问题描述 1.用户手动滑动屏幕,根据滑动的方向,打开相应的功能(如:向上滑摇钱树经验明细,向下滑打开任务明细,向左滑打开聚宝盆物品查看等功能),滑动事件捕获问题. 2.大家都知道,划动都有角度问题,如:向330度方向滑动手机,要计算出它的方向问题. 3.HTML5提供的滑动事件,只能读取到起点和终点坐标,计算角度问题. 4.手机屏幕坐标与标准坐标系转换问题. 解决方案 1.滑动屏幕事件使用HTML5 的touchstart滑动开始事件和touchend滑动结

IE,火狐,谷歌浏览器下js判断滚动条是否已拉到页面最底部

E/FF/Chrome下document.documentElement和document.body的 scrollHeight/scrollTop/clientHeight 以及判断滚动条是否已拉到页面最底部 DTD已声明 IEdocument.documentElement.scrollHeight  浏览器所有内容高度 ,document.body.scrollHeight  浏览器所有内容高度document.documentElement.scrollTop  浏览器滚动部分高度,do

js判断字符串是否有下划线

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js判断字符串是否有下划线</title> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> </head> <

js判断浏览器类型

js判断浏览器类型  <script type="text/javascript" >     <!--   function getOs()   {       var OsObject = "";      if(isIE = navigator.userAgent.indexOf("MSIE")!=-1) {           return "MSIE";      }      if(isFiref

关于js封装框架类库之样式操作

在js中,对样式的操作我们并不感到陌生,在很多框架中都是用极少的代码,实现更强大的功能,在这做出一些的总结.存在不足还望指出! 1.封装一个添加css的方法(这篇引用了前面的框架结构) 在 js 中 获得样式, 默认只能获得行内样式, 类样式与外部样式无法获得, 可以使用计算样式来获得第一次的结果window.getComputedStyle  获得style对象 建议第一次用 注意: 如果是 低版本的 IE 浏览器, 需要使用 currentStyle YY.fn.extend({ css: