jq和js实现滚动加载

最新推荐文章于 2023-11-28 17:53:15 发布

原创最新推荐文章于 2023-11-28 17:53:15 发布 · 142 阅读

0 ·

CC 4.0 BY-SA版权

cyh的前端学习之路专栏收录该内容

40 篇文章

订阅专栏

本文深入探讨了网页中无限滚动加载技术的实现细节，通过控制变量page和状态标记isLoading，结合jQuery的AJAX方法，实现了数据的异步加载和显示。文章详细介绍了如何监听滚动事件并判断是否达到页面底部，从而触发数据加载，同时考虑了防止重复加载的机制。

首先纪律性的定义page和isLoading

var page = 0;
var isLoading = false;
// 获取商家列表
function getList(){
  page++;
  isLoading = true;
  $.getJSON("../json/homelist.json", 
     (data, textStatus, jqXHR) => {
      console.log("我是商家列表数据组a",data);
      var list = data.data.poilist || [];
      initContentList(list);
      isLoading = false;      
    }
  );
}

在函数开始加载的时候page++，同时转换isLoading，在AJAX载入完成后调转isLoading

function addEvent(){
  window.addEventListener('scroll', ()=>{
    var clientHeight = document.documentElement.clientHeight;
    var scrollHeight = document.body.scrollHeight;
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    var prodis = 30;
    if(clientHeight+scrollTop >= (scrollHeight-30)){
      //最多滚动三页
      if(page<3){
        //在ajax请求时避免多次加载
        if(isLoading){
          return;
        }
        getList();
      }
    }
  })
}