js滚动加载小插件

本文实例讲述了jquery滚动加载数据的方法。分享给大家供大家参考。具体分析如下：

少废话直接上代码！！！粗暴，直接，干脆

 0//lk-2017-05-04 


 1(function($, win) {
     var defaults = {
         'container': '#container', //容器
         'sections': '.section', //子容器
         'searchname': '全部', //搜索名称
         'url': '', //加载更多数据请求的路径
         'updata': 'data', //更新的数据
         'page': '1', //第几页
         'pagenumber': '10', //每页多少条数据
         'backFn': function(d) {

         }
     };
     //容器与最后一个子容器,状态
     var container, sections, state = 0;
     $.fn.isScroll = function(options) {
         opts = $.extend({}, defaults, options || {});
         container = $(opts.container);
         sections = container.find(opts.sections).last();
         var i = 0,
             state = 1,
             _last;
         container.scroll(function() {
            var lastdom=container.find(opts.sections).last();
             if(container.outerHeight() + container.scrollTop() > lastdom.offset().top) {
                 //防止重复加载
                 if(_last == lastdom[0]) {
                     return;
                 } else {
                     _last = lastdom[0];
                 }
                 if(!state) return; //防止重复加载
                 state = 0;
                 //请求数据
                 $.post( opts.url,{
                      page: (lastdom.attr("pages") || opts.page),
                     pagenumber: opts.pagenumber,
                     name: opts.searchname
                 }, function(status, data) {
                     if(status) {
                         state = 1;
                         if(typeof(opts.backFn) == "function") {
                             opts.backFn('backFndata');
                         }
                     }
                 })

             }
         })
     }
 })(jQuery, window)

/*-------使用方法--------*/

 1        /*绑定滚动事件*/
     $("#table").isScroll({
         container: "#table",
         sections: ".list",
         searchname: "全部",
         url: "wwww",
         page: 1,
         pagenumber: 10,
         backFn: function(data) {
             console.log(data);
         }
     })

html代码

<ul id="table" class="table">
   <li class="list" v-bind:pages="item.page" v-for="item in data_list">{{item.txt}}</li>
3 </ul>

使用方法

 1.此插件基于jquery，必须先加载jquery。

 2.可以绑定到指定的div。

 3.回掉函数返回滚动加载后的数据，接收并进行处理。