自动加载更多 jQuery 插件 - ev-scroll-loader

版本:

浏览量:1045

最后更新：2021-09-10

应用标签：Jquery插件 git MAC 软件

推荐指数:

查看演示点击下载

详细信息

只是另一个用于无限滚动的 jQuery 插件，当您滚动到内容底部时，它会通过 AJAX 自动加载更多内容。支持桌面和移动。

该插件带有 on Scroll ed 处理程序，当我们滚动到内容底部时将触发该处理程序。

如何使用它：

1. 需要时在网页上包含最新的 jQuery JavaScript 库和 jQuery ev-scroll-loader 插件。

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="ev-scroll-loader.js"></script>

2. 基本用法。

$('.scrollMe').evScrollLoader({
 
  // height of scrollable container
  height: 500
 
  // CSS overflow-y Property
  scrollStyle: 'scroll',
 
  // callback
  onScrolled: function() {}
   
});

3. 一个完整的例子。

<div class="contentWrap">
  <div class="content"></div>
</div>

(function($) {
 
  'use strict';
 
  var getLoader = function(max) {
      var count = 0;
      return function() {
          var $this = this;
          if (count === max) {
              $this.evScrollLoader('hideLoader');
              return $.Deferred().resolve();
          } else {
              ++count;
              return $.ajax({
                  url: 'demo.json',
                  dataType: 'json',
                  success: function(data, status, xhr) {
                      $.each(data.data, function(index, item) {
                          var $wrappedItem = $('<div class="item">' + item + '</div>');
                          $this.append($wrappedItem);
                          $wrappedItem.click(function() {
                              $this.evScrollLoader('scrollTo', $wrappedItem.offset().top);
                          });
                      });
                  }
              });
          }
      };
  };
 
  $(document).ready(function() {
      var $content = $('.content'),
          $contentWrap = $('.contentWrap'),
          resize = function() {
              $contentWrap.height($(window).height() * 0.8);
          };
      $(window).resize(resize);
      var heights = ['80%', 400, 800];
      $content.each(function(index, element) {
          var loader = getLoader(10);
          loader.apply($(element)).then(function() {
              $(element).evScrollLoader({
                  height: heights[index],
                  scrollStyle: 'overlay',
                  onScrolled: loader
              });
              resize();
          });
      });
  });
 
}(jQuery));