wap下拉刷新 php,移动端顶部下拉刷新实例说明

需求说明

需求如Demo演示，判断当用户有下拉的行为时，进行ajax请求发送，代码大致思路为捕获touchstart、 touchmove、touchend事件，根据手指滑动距离及方向判断用户的行为。

遇到的问题说明事件绑定在哪里

Demo中是下方div滑动，应该把事件绑在下方div上，但是这样处理在QQ浏览器中有问题，QQ浏览器需要阻止document的touchmove事件，否则无法进行下拉，而阻止后再移除事件时，会在UC浏览器中产生bug，所以我在Demo中把事件绑定在了document的上面，因此而造成的问题是滑动上部红色部分，仍然可以下拉刷新，相比UC的大bug而言，这样体验更好。

代码说明/*

* 调用    drawDown.init();

*/var drawDown = {

pDiv : '

加载中

',

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('

新消息还没有出来呢

');

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