下拉刷新上拉加载插件

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/susuzhe123/article/details/80841349

源码：
;(function($,window,undefined){
    function ScrollUpLoad() {
        //返回此对象
        return new ScrollUpLoad.prototype.init();
    }
    ScrollUpLoad.prototype = {
        init: function() {
            this.distance = 0;   //加载按钮的距离底部距离
            this.touchPosition = {};  //手势坐标信息集合
            //初始化执行函数
            this.touchStart();
            this.touchMove();
            this.touchEnd();
            return this;
        },
        touchStart: function(){
            //获取初始坐标点
            var _this = this;
            $(window).on('touchstart',function(e){
                _this.touchPosition.startY = e.changedTouches[0].pageY;
            })
        },
        touchMove: function() {
            var _this = this;
            //手指移动事件
            $(window).on('touchmove',function(e){
                //获取滚动高度、设备高度、文档高度的数据
                var scrollTop  = $(window).scrollTop(),
                    serviceHei = $(window).height(),
                    documenHei = $(document).height();
                //处理上拉加载
                if(scrollTop + serviceHei >= documenHei){
                    //调取方向判断  处理不同逻辑
                    _this.direction(e,function(){
                        _this.distanceRed('bottom');
                    },function(){
                        _this.distanceAdd('bottom');
                    })
                }else if(scrollTop == 0){  //下拉刷新
                    //调取方向判断  处理不同逻辑
                    _this.direction(e,function(){
                        _this.distanceAdd('top');
                    },function(){
                        _this.distanceRed('top');
                    })
                }else{
                    _this.setHtmlCss('auto');
                }
            });
        },
        touchEnd:function(){
            var that = this;
            $(window).on('touchend',function(){
                var scrollTop  = $(window).scrollTop();
                if($('.load').hasClass('top')){
                    if(scrollTop != 0){
                        console.log('上拉加载！')
                        $('.load').attr("style","bottom:40px");
                    }else{
                        console.log('下拉刷新！')
                        $('.load').attr("style","top:60px");
                    }
                }else{
                    console.log('不加载了')
                    //重置
                    if(scrollTop != 0){
                        $('.load').removeClass('top').addClass('bottom down').attr("style","bottom:-0.46rem");
                    }else{
                        $('.load').removeClass('top').addClass('bottom down').attr("style","top:-30px;");
                    }
                }
                that.setHtmlCss('auto');
                that.distance = 0;
            });
        },
        direction: function(e,upFun,downFun) {
            //判断手势方向
            var _this = this,
                touchInfor = _this.touchPosition;
            touchInfor.endY = e.changedTouches[0].pageY;
            touchInfor.distanceY = touchInfor.endY - touchInfor.startY;
            _this.setHtmlCss('hidden');
            if(touchInfor.distanceY<0){
                //上滑操作
                if(upFun && typeof upFun === 'function'){
                    upFun()
                }
            } else if(touchInfor.distanceY>0){
                //下滑操作
                if(downFun && typeof downFun === 'function'){
                    downFun()
                }
            }
            //重置起点X坐标
            _this.touchPosition.startY = e.changedTouches[0].pageY;
        },
        distanceAdd: function(direction) {
            //按钮控制下移
            var _this = this;
            if(_this.distance == 0){
                _this.distance = -30;
            }
            $('.load').removeClass('down top').addClass('bottom').css(direction,_this.distance --);
        },
        distanceRed: function(direction) {
            //按钮控制上移
            var _this = this;
            $('.load').addClass('top').removeClass('bottom down').css(direction,_this.distance++)
        },
        setHtmlCss: function(flag) {
            $('html').css('overflow-y',flag)
        }
    }

    ScrollUpLoad.prototype.init.prototype = ScrollUpLoad.prototype;

    if(!window.ScrollUpLoad){
        window.ScrollUpLoad =  ScrollUpLoad;
    }

})($,window,undefined);

HTML：
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <title></title>
    </head>
    <body>

        <!--加载-->
        <p class="load"></p>
    </body>
</html>

css：
.load{position: fixed;left: 50%;bottom: -0.46rem;margin-left: -0.22rem;width: 0.44rem;height: 0.44rem;background:#fff url(../i/shua.png) no-repeat center;background-size:100% 100%;border-radius: 0.44rem;box-shadow: 0 0 0.08rem #ededed;opacity: 0.26;}
.load.top{animation: roat .36s linear infinite;opacity: 1;-webkit-transition:opacity 1s ease 0s;}
.load.bottom{animation: roatNi .4s linear infinite;opacity: 0.26;-webkit-transition:opacity 0.8s ease 0s;}
.load.down{-webkit-transition:all 0.8s ease 0s;}
@-webkit-keyframes roat{0%{-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);}100%{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}
@-webkit-keyframes roatNi{100%{-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0)}0%{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}}

调用：
ScrollUpLoad()