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.回掉函数返回滚动加载后的数据，接收并进行处理。