为了账号安全,请及时绑定邮箱和手机立即绑定

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

标签:
Html5

需求说明

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


遇到的问题说明

  • 事件绑定在哪里

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


代码说明

/*
 * 调用    drawDown.init();
 */var drawDown = {
        pDiv : '<div class="dragdown_wapper"><div class="dragdown_loading"><p class="hide"><span>![](http://upload-images.jianshu.io/upload_images/1094385-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');
        }
    };



作者:进击的程序茗
链接:https://www.jianshu.com/p/a79763f24fb8


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消