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

顶部下拉刷新Demo实例

需求说明

需求如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>![](http:https://img.haomeiwen.com/i1094385/f2978305bed8e91a.gif?imageMogr2/auto-orient/strip)</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');
        }
    };