JQuery实现 上滑加载更多

使用jQuery实现HTML5页面上滑加载更多功能的方案：

1. 页面结构

<div id="content-container">
  <!-- 这里原本应由v-for循环生成的div.item将由JavaScript动态添加 -->
</div>

<!-- 加载提示区域 -->
<div id="load-more" style="display:none;">
  <p>Loading...</p>
</div>

2. JavaScript（使用jQuery）

$(document).ready(function () {
  var items = []; // 存储已加载的数据项
  var page = 1; // 当前请求页码
  var loadingMore = false; // 是否正在加载更多
  var hasMore = true; // 是否还有更多数据可供加载

  function fetchData() {
    loadingMore = true;
    $('#load-more').show(); // 显示加载提示

    $.ajax({
      url: 'your-api-url',
      type: 'GET',
      data: { page: page, limit: 15 },
      success: function (response) {
        var newItems = response.items; // 假设API返回数据结构中包含一个名为items的数组
        if (newItems.length < 15) {
          hasMore = false; // 如果本次加载数量不足15条，说明已无更多数据
        }
        $.each(newItems, function (index, item) {
          var newItemHtml = '<div class="item">' + /* 渲染单个数据项内容 */ + '</div>';
          $('#content-container').append(newItemHtml);
        });
        page++;
        loadingMore = false;
        $('#load-more').hide(); // 隐藏加载提示
      },
      error: function (jqXHR, textStatus, errorThrown) {
        console.error('Error fetching more data:', textStatus, ', Details:', errorThrown);
        loadingMore = false;
        $('#load-more').hide(); // 隐藏加载提示
      },
    });
  }

  $(window).on('scroll', function () {
    var contentContainer = $('#content-container');
    var threshold = 100;
    var containerOffset = contentContainer.offset().top + contentContainer.outerHeight();
    var windowBottom = $(window).scrollTop() + $(window).height();

    if (!loadingMore && windowBottom > containerOffset + threshold && hasMore) {
      fetchData();
    }
  });

  // 初始加载第一页数据
  fetchData();
});

解释说明

• 使用div#content-container来存放数据项，添加了一个隐藏的div#load-more用于显示加载中的提示。

• JavaScript部分，我们使用jQuery来处理DOM操作和事件监听：

  • 定义全局变量items、page、loadingMore和hasMore

  • 成功后，将新数据逐个生成对应的HTML字符串并追加到#content-container内，同时更新页码和loadingMore状态。若本次加载数据不足15条，则设置hasMore为false。若请求失败，打印错误信息并恢复loadingMore状态。在请求开始和结束时，分别显示和隐藏加载提示。

  • 使用$(window).on('scroll', ...)监听窗口滚动事件。在回调函数中，计算content-container距窗口底部的距离，当距离小于等于阈值（100像素），且当前未处于加载状态且仍有更多数据时，触发fetchData方法加载更多数据。

  • 页面加载完成后，立即调用fetchData函数加载第一页数据。

使用div展示数据，通过Ajax动态加载，距离底部100像素时触发加载，加载中显示提示，加载失败时不重试，每次加载15条数据。

欢迎关注公-众-号【TaonyDaily】、留言、评论，一起学习。

Don’t reinvent the wheel, library code is there to help.

文章来源：刘俊涛的博客

---

若有帮助到您，欢迎点赞、转发、支持，您的支持是对我坚持最好的肯定(^_)