本文實例講述了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.回掉函數返回滾動加載後的數據，接收並進行處理。

js滾動加載小插件