需求说明
需求如Demo演示，判断当用户有下拉的行为时，进行ajax请求发送，代码大致思路为捕获touchstart、 touchmove、touchend事件，根据手指滑动距离及方向判断用户的行为。
遇到的问题说明
事件绑定在哪里
Demo中是下方div滑动，应该把事件绑在下方div上，但是这样处理在QQ浏览器中有问题，QQ浏览器需要阻止document的touchmove事件，否则无法进行下拉，而阻止后再移除事件时，会在UC浏览器中产生bug，所以我在Demo中把事件绑定在了document的上面，因此而造成的问题是滑动上部红色部分，仍然可以下拉刷新，相比UC的大bug而言，这样体验更好。
代码说明
/*
* 调用 drawDown.init();
*/var drawDown = {
pDiv : '<div class="dragdown_wapper"><div class="dragdown_loading"><p class="hide"><span></span><span>加载中</span></p><p data-txt="下拉可以更新" data-txt1="松开可以刷新" ></p></div></div>',
pImg:'',//加载中图片
pContent:'',//文字内容
isLoad:false,
disYStart:0,//保存每次touchmmove触发的初始坐标
disYMove:0,//每次touchmove初始距离
disY:0,//每次移动总距离
wapperMarginTop:0,//下拉刷新div高度
liveTop:$('.j_liveing').offset().top,
offsetTop:0,
init:function(){ var self = this;
$('.j_liveing').before(self.pDiv); self.wapperMarginTop = $('.dragdown_wapper').height(); self.pContent = $('.dragdown_loading ').find('p').eq(1); self.pImg = $('.dragdown_loading ').find('p').eq(0); self.offsetTop = $('.dragdown_wapper').offset().top; self.bindEvent();
},
bindEvent:function(){ var self = this;
document.addEventListener("touchstart",function(e){ self.touchstart(e)
},false);
document.addEventListener("touchmove",function(e){ self.touchmove(e)
},false);
document.addEventListener("touchend",function(e){ self.touchend(e)
},false);
},
touchstart:function(e){ var self = this; if(self.isLoad == 'true')return; self.disYStart = e.changedTouches[0].pageY;
$('.dragdown_wapper').css('margin-top',-self.wapperMarginTop); self.disY = 0;
self.pContent.html(self.pContent.data('txt'));//下拉即可刷新
},
touchmove:function(e){ var self = this; if(self.isLoad == 'true')return; self.disYMove = e.changedTouches[0].pageY;
self.disY += self.disYMove - self.disYStart;//手指滑动的距离
if(self.disY > 0&&document.body.scrollTop == 0){
e.preventDefault();
$('.dragdown_wapper').css('margin-top',-(self.wapperMarginTop-self.disY*0.4)+'px'); //通过更改margin-top来移动
} self.disYStart = e.changedTouches[0].pageY; self.pContent.html(self.pContent.data('txt1'));//松开即可刷新
},
touchend:function(e){ var self = this; if(self.isLoad == 'true')return; self.isLoad = true;
self.pImg.removeClass('hide');//加载中
self.pContent.html(''); self.pContent.addClass('hide'); if($('.dragdown_wapper').offset().top>=(self.offsetTop+40)){ // 模拟ajax处理
setTimeout(function(){ self.hideWrapper();
$('body').append('<div class="liver_nosay" style="top:'+(self.liveTop-6)+'px">新消息还没有出来呢</div>');
setTimeout(function(){
$('.liver_nosay').remove();
},2000); self.isLoad = false;
},4000)
}else{ //下拉距离过短直接隐藏
self.hideWrapper();
}
},
hideWrapper:function(){ var self = this;
$('.dragdown_wapper').css('margin-top',-self.wapperMarginTop); self.pContent.removeClass('hide'); self.pContent.html(self.pContent.data('txt')); self.pImg.addClass('hide');
}
};
作者：进击的程序茗
链接：https://www.jianshu.com/p/a79763f24fb8
随时随地看视频
