js滚动加载小插件

Posted 2020-09-16 小小坤

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

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

 0//lk-2017-05-04 


 1(function($, win) {
 2      var defaults = {
 3          ‘container‘: ‘#container‘, //容器
 4          ‘sections‘: ‘.section‘, //子容器
 5          ‘searchname‘: ‘全部‘, //搜索名称
 6          ‘url‘: ‘‘, //加载更多数据请求的路径
 7          ‘updata‘: ‘data‘, //更新的数据
 8          ‘page‘: ‘1‘, //第几页
 9          ‘pagenumber‘: ‘10‘, //每页多少条数据
10          ‘backFn‘: function(d) {
11 
12          }
13      };
14      //容器与最后一个子容器,状态
15      var container, sections, state = 0;
16      $.fn.isScroll = function(options) {
17          opts = $.extend({}, defaults, options || {});
18          container = $(opts.container);
19          sections = container.find(opts.sections).last();
20          var i = 0,
21              state = 1,
22              _last;
23          container.scroll(function() {
24             var lastdom=container.find(opts.sections).last();
25              if(container.outerHeight() + container.scrollTop() > lastdom.offset().top) {
26                  //防止重复加载
27                  if(_last == lastdom[0]) {
28                      return;
29                  } else {
30                      _last = lastdom[0];
31                  }
32                  if(!state) return; //防止重复加载
33                  state = 0;
34                  //请求数据
35                  $.post( opts.url,{
36                       page: (lastdom.attr("pages") || opts.page),
37                      pagenumber: opts.pagenumber,
38                      name: opts.searchname
39                  }, function(status, data) {
40                      if(status) {
41                          state = 1;
42                          if(typeof(opts.backFn) == "function") {
43                              opts.backFn(‘backFndata‘);
44                          }
45                      }
46                  })
47 
48              }
49          })
50      }
51  })(jQuery, window)

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

 1        /*绑定滚动事件*/
 2      $("#table").isScroll({
 3          container: "#table",
 4          sections: ".list",
 5          searchname: "全部",
 6          url: "wwww",
 7          page: 1,
 8          pagenumber: 10,
 9          backFn: function(data) {
10              console.log(data);
11          }
12      })

html代码

1 <ul id="table" class="table">
2    <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.回掉函数返回滚动加载后的数据，接收并进行处理。