js版上拉加载插件

文件大小:0.16MB下载:359次
自己手写JS版上拉加载数据支持PC端和移动端,支持Vue、React、原生H5。

index.html文件中的代码示例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>上拉加载数据</title>
    <style>
        .news-wrap{width:500px;height:auto;border:solid 1px #0AA6E8;padding-top:10px;padding-bottom:10px;}
        .news-wrap .list{width:100%;height:200px;border-bottom:1px solid #FF0000;line-height:50px;}
    </style>
</head>
<body>
<div id="news-wrap" class="news-wrap">
    <div class="list">新闻1</div>
    <div class="list">新闻2</div>
    <div class="list">新闻2</div>
    <div class="list">新闻2</div>
    <div class="list">新闻2</div>
    <div class="list">新闻2</div>
    <div class="list">新闻1</div>
    <div class="list">新闻2</div>
    <div class="list">新闻2</div>
    <div class="list">新闻2</div>
    <div class="list">新闻2</div>
    <div class="list">新闻2</div>
</div>
<script src="jquery.js"></script>
<script src="uprefresh.js"></script>
<script>
    $(function(){
        var oNewsWrap=$("#news-wrap");
        var pullUp=new UpRefresh();
        pullUp.init({"curPage":1,"maxPage":10,"offsetBottom":100},function(curpage){
            $.ajax({
                type:"get",
                url:"http://jsonplaceholder.typicode.com/posts/"+curpage+"/comments",
                success:function(data){
                    var str='';
                    for(var i in data){
                        str+='<div class="list">'+data[i].name+'</div>'
                    }
                    oNewsWrap.append(str);
                }
            });
        });
    });
</script>
</body>
</html>

uprefresh.js代码示例:

/*eslint-disable*/
(function (global,document,factory) {
    //这个判断支持模块化比如react和vue
    if ( typeof module != 'undefined' && module.exports ) {
        module.exports = factory(global,document);
    } else if ( typeof define == 'function' && define.amd ) {
        define( function () { return factory(global,document); } );
    } else if(typeof global != "undefined") {
        global.UpRefresh = factory(global,document);
    }
})(window, document,function (global,document) {
    var UpRefresh=function(){
        this.fnScrollBottom=null;
        this.eventScroll();
    };
    UpRefresh.prototype={
        init:function(opts,callback){
            if(opts instanceof Object) {
                this.opts = opts;
                this.iMaxPage=this.opts.maxPage;
                this.fnCallback=callback;
                this.iOffsetBottom=this.opts.offsetBottom;
                this.iCurPage=this.opts.curPage;
            }

        },
        eventScroll:function(){
            var _this=this;
            _this.fnScrollBottom=_this.scrollBottom().bind(this);
            global.addEventListener("scroll",_this.fnScrollBottom,false);
        },
        uneventSrcoll:function(){
            var _this=this;
            global.removeEventListener("scroll",_this.fnScrollBottom,false);
        },
        scrollBottom:function(){
            var _this=this;
            var bScroll=true;
            return function(){
                if(!bScroll){
                    return;
                }
                bScroll=false;
                var timer=null;
                clearTimeout(timer);
                timer = setTimeout(function(){
                    //整个页面滚动条的高度
                    var iScrollHeight=document.documentElement.scrollHeight || document.body.scrollHeight;
                    //滚动到当前的距离
                    var iScrollTop=document.documentElement.scrollTop || document.body.scrollTop;
                    //整个窗体的高度
                    var iWinHeight=document.documentElement.clientHeight || document.body.clientHeight;
                    if(iScrollHeight-(iWinHeight+iScrollTop)<=_this.iOffsetBottom){
                        if(_this.iCurPage<_this.iMaxPage) {
                            _this.iCurPage++;
                            _this.fnCallback(_this.iCurPage);
                        }
                    }
                    bScroll=true;
                },300);
            }
        }
    };
    return UpRefresh;
});

完整代码下载:

链接: https://pan.baidu.com/s/1i-K9X6oF2-3D71s3EmHldw  密码: dl1m 点击下载
收藏
扫一扫关注我们