jQuery下拉滚动条刷新 ajax获取数据

浏览数：49 / 时间：2015年06月09日

效果就是看百度图片的时候，滚动条拉到底部，将会出现动态刷新的图样。

已经做成了插件

下面是文件 jquery.bottomScrollLoading.js 中的代码

/**
 * Created by ipqhjjybj on 14-3-7.
 */
;(function($){

    var $bottomScrollLoading;
    $.fn.bottomScrollLoading = function(settings){
        return this.each(function(){
            $bottomScrollLoading.init($(this), settings);
        });
    };
    $bottomScrollLoading = $.bottomScrollLoading = {
        init: function(outer, settings){
            this.appendTo = settings.appendTo | $("body");
            this.outer = outer;                 //这是滚动的视图
            this.range = settings.range || -700; //距下边界长度/单位px
            this.maxnum = settings.maxnum || 20; //设置加载最多次数
            this.ajaxData = settings.ajaxData || {};
            this.isLoading = false;
            this.num = 1;
            if (‘undefined‘ === typeof this.ajaxData.dataType || !$.inArray(this.ajaxData.dataType, (‘html‘, ‘json‘))) {
                this.ajaxData.dataType = ‘html‘;
            }

            this.tmp_success = this.ajaxData.success;
            this.ajaxData.success = function(ret){

                sl = $bottomScrollLoading;
                sl.isLoading = false;
                $("#ipq_loading").remove();

                if(‘function‘ === typeof sl.tmp_success){
                    sl.tmp_success(ret);
                }
            }
            $(this.outer).scroll(function(){
                var sl = $bottomScrollLoading;
                var scrollPos = $(this).scrollTop();
                var totalHeight = parseFloat($(sl.outer).height()) + parseFloat(scrollPos);
                if( (false === sl.isLoading) && ( $(document).height()-sl.range) <= totalHeight  && sl.num <= sl.maxnum){
                    sl.isLoading = true;
                    $("#content").append("<img id=‘ipq_loading‘ style=‘height: 60px; width: 60px; margin: 0 auto; margin-top: -60px; margin-left: 45%‘ src=‘http://www.lanrentuku.com/img/allimg/1212/5-121204193R0-50.gif‘>");
                    sl.sendRequest();
                    sl.num = sl.num + 1;

                }
            });
        },
        sendRequest:function(){
            $.ajax(this.ajaxData);
        }
    }
})(jQuery);

/*

 how to use it

$(window).bottomScrollLoading({
    out:$(document),
    ajaxData:{
        url: "test5.html",
        success:function(ret){
            alert(ret);
            $("#content").append("<div style=‘height: 500px;background-color: #FF0000;‘></div>");//如果想修改 loading的图片，请修改这里
        }
    }
});

*/

使用时加上头文件

    <script src="js/jquery-1.9.0.min.js" type="text/javascript"></script>
    <script src="js/jquery.bottomScrollLoading.js" type="text/javascript"></script>

之后加上代码

$(window).bottomScrollLoading({
            out:$(document),
            ajaxData:{
                url: "test5.html",
                success:function(ret){
                    //alert(ret);
                    $("#content").append("<div style=‘height: 500px;background-color: #FF0000;‘></div>");
                }
            }
        });

放上我的 demo页面好了

<!DOCTYPE=html>
<html>
<head>
    <script src="js/jquery-1.9.0.min.js" type="text/javascript"></script>
    <script src="js/jquery.bottomScrollLoading.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(window).bottomScrollLoading({
            out:$(document),
            ajaxData:{
                url: "test5.html",  //就是ajax时用的地址
                success:function(ret){
                    //alert(ret);
                    $("#content").append("<div style=‘height: 500px;background-color: #FF0000;‘></div>");
                }
            }
        });
    </script>
</head>
<body>

<div id="content" style="height:960px">
    <div id="follow">this is a scroll test;<br/>    页面下拉自动加载内容</div>
    <div style=‘border:1px solid tomato;margin-top:20px;color:#ac1;height:800‘ >hello world test DIV</div>
</div>
</body>
</html>

制作这个插件的时候，参考了http://blog.csdn.net/saindy5828/article/details/7756315这里的代码

如果对加载时的loading图片不满意的。可以去修改 jquery.bottomScrollLoading.js 中的 $(body)附加的图片部分。。

第一次做jQuery插件。。

看来js水平进步了很多。。

附送一个demo.zip 来演示 demo

hlyblog.net

jQuery下拉滚动条刷新 ajax获取数据,古老的榕树,5-wow.com

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

jQuery下拉滚动条刷新 ajax获取数据