手机端 jquery下拉加载更多

原创

mob649e8160b585 2023-08-03 06:41:31 ©著作权

文章标签 加载加载更多 html 文章分类 jQuery 前端开发

©著作权归作者所有：来自51CTO博客作者mob649e8160b585的原创作品，请联系作者获取转载授权，否则将追究法律责任

手机端jquery下拉加载更多

在移动设备上，通常会遇到需要无限滚动加载内容的情况，以提升用户体验，而不需要刷新整个页面。其中一种常见的实现方式是使用jQuery来实现下拉加载更多功能。

1. 实现原理

下拉加载更多的实现原理是当用户滚动到页面底部时，通过异步请求加载更多的数据，并将新的数据添加到页面上。

2. 实现步骤

2.1 HTML结构

首先，在HTML中创建一个包含内容的容器，例如：

<div id="content">
  <ul id="list">
    <!-- 初始加载的内容 -->
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    <!-- ... -->
  </ul>
</div>

2.2 CSS样式

为了使内容容器可以滚动，并设置一个加载提示的元素，可以添加如下CSS样式：

#content {
  height: 300px;
  overflow-y: scroll;
}

#loading {
  display: none;
  text-align: center;
  padding: 10px;
  font-weight: bold;
}

2.3 JavaScript代码

在JavaScript中，使用jQuery来监听滚动事件，并在滚动到页面底部时触发加载更多的操作。

$(document).ready(function() {
  var page = 1; // 当前页码
  var isLoading = false; // 是否正在加载数据

  // 监听滚动事件
  $(window).scroll(function() {
    // 判断是否滚动到页面底部
    if ($(window).scrollTop() + $(window).height() >= $(document).height()) {
      // 如果没有正在加载数据，则进行加载操作
      if (!isLoading) {
        isLoading = true;
        $('#loading').show(); // 显示加载提示

        // 模拟异步请求数据
        setTimeout(function() {
          // 加载更多数据
          var html = '';
          for (var i = 0; i < 10; i++) {
            html += '<li>item ' + (i + page * 10) + '</li>';
          }
          $('#list').append(html); // 添加新数据到列表中

          page++; // 下一页页码
          isLoading = false;
          $('#loading').hide(); // 隐藏加载提示
        }, 1000);
      }
    }
  });
});