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>      

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