jquery 写个滚动自动加载插件

分享给大家：

应用 1.  jquery 包 

          2. template.js 包

     

$(function(b) {

    b.fn.scrollAjax = function(d) {
        var a = b(this);
        d = b.extend({}, {
            tpl: ".tpl",
            url: "http://www.yipanwang.com",
            type: "get",
            page: 0
        }, d);
        a.options = d;
        a.options.rpage = 0;
        a.options.pageCount = 0;
        a.loadHtml = "";
        a.loadClass = "";
        a.loadTop = !1;
        a.isScrollBool = !0;
        a.setIsScrollBool = function(b) {
            a.isScrollBool = b
        };
        a.ajax = function() {
            var c, d = template(b(a.options.tpl).html());
            b.ajax({
                url: a.options.url,
                type: a.options.type,
                data: {
                    p: a.options.page
                },
                async: !1,
                contentType: "json",
                dataType: "json",
                success: function(b) {
                    a.options.rpage = b.page;
                    a.options.pageCount = b.pageCount;
                    c = d(b);
                    console.log(c);
                    console.log(a.options.tpl);
                    a.html(c);
                    a.hideLoading()
                },
                error: function() {
                    console.log("error");
                    a.hideLoading()
                }
            })
        };
        a.headerLoading = function() {
            a.loadHtml = "<div class='headerloading'>上加载...</div>";
            b("body").append(a.loadHtml);
            b(".headerloading").css({
                position: "absolute",
                width: b(window).width(),
                height: 10,
                top: b(document).scrollTop() + 50,
                left: 0,
                "text-align": "center"
            });
            a.loadClass = ".headerloading"
        };
        a.footerLoading = function() {
            a.loadHtml = "<div class='footerloading'>下加载...</div>";
            b("body").append(a.loadHtml);
            b(".footerloading").css({
                position: "absolute",
                width: b(window).width(),
                height: 10,
                top: b(window).height() + parseFloat(b(document).scrollTop()) - 100,
                left: 0,
                "text-align": "center"
            });
            a.loadClass = ".footerloading"
        };
        a.centerLoading = function() {
            a.loadHtml = "<div class='centerloading'>加载中...</div>";
            b("body").append(a.loadHtml);
            b(".centerloading").css({
                position: "absolute",
                width: b(window).width(),
                height: 10,
                top: b(window).height() + parseFloat(b(document).scrollTop()) - b(window).height() / 2 + 20,
                left: b(window).width() / 2 - 20,
                "text-align": "center"
            });
            a.loadClass = ".centerloading"
        };
        a.hideLoading = function() {
            "" != a.loadHtml && (b(a.loadClass).remove(), a.loadHtml = "")
        };
        a.setTimeOutScrollTop = function() {
            if (10 > parseFloat(b(document).scrollTop())) {
                if (0 < a.options.rpage) return a.options.page = a.options.rpage - 1, a.headerLoading(), b(document).scrollTop(12), !0;
                b(document).scrollTop(0)
            }
            return !1
        };
        a.scrollWindows = function() {
            var c = !1;
            1 == a.setTimeOutScrollTop() && (c = !0);
            console.log("top:" + b(document).scrollTop());
            parseFloat(b(window).height()) + parseFloat(b(document).scrollTop()) >= b(document).height() && a.options.rpage < a.options.pageCount && (a.options.page = a.options.rpage + 1, c = !0, a.footerLoading());
            1 == c ? a.ajax() : a.hideLoading()
        };
        a.init = function() {
            a.centerLoading();
            a.ajax();
            b(window).scroll(function() {
                1 == a.isScrollBool && a.scrollWindows()
            })
        };
        a.init();
        return {
            setIsScrollBool: a.setIsScrollBool
        }
    }

});

下面是写的应用步骤

 <div class="am-list-news-bd am-list-news-default">
 <!--物业沟通列表-->
  <ul class="am-list">
      <!--不带标题图-->
    请稍等...
      <!--不带标题图-->

    </ul>

     <script id="tpl" type="text/html">
         <%for(i=0;i<list.length;i++){%>
         <li class="am-g am-list-item-desced">
             <div class=" am-list-main">
                 <h3 class="am-list-item-hd"><a href="http://www.yipanwang.com/<%=list[i].url%>" class=""><%=list[i].c_title%></a></h3>
                 <div class="am-list-item-text"><%=getLocalTime(list[i].c_time)%></div>
             </div>
         </li>
         <%}%>
     </script>
  </div>

<script>


    $(document).ready(function(){

        var obj=$(".am-list").scrollAjax({tpl:"#tpl",url:"{:U("Yeweihuicenter/ajaxchapter",array("village_id"=>$vo["village_id"],"n"=>$_GET["n"]))}",type:"get",page:0});
        //obj.setIsScrollBool(false);
    });

</script>

大家有意向获取实例可以上“一盘网” 找联系我们的平台服务下的邮箱 发邮件给我。