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操作和事件监听:

    • 定义全局变量itemspageloadingMorehasMore

    • 成功后,将新数据逐个生成对应的HTML字符串并追加到#content-container内,同时更新页码和loadingMore状态。若本次加载数据不足15条,则设置hasMorefalse。若请求失败,打印错误信息并恢复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.

文章来源:刘俊涛的博客


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

posted @ 2024-04-10 14:30  刘俊涛的博客  阅读(2)  评论(0编辑  收藏  举报