div中使用懒加载的相关问题

最新推荐文章于 2024-03-09 17:01:46 发布

无尽的拉格朗日

最新推荐文章于 2024-03-09 17:01:46 发布

阅读量491

点赞数

分类专栏： Vue JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/zxcvbnm173/article/details/118339857

版权

Vue 同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

JavaScript

8 篇文章 0 订阅

订阅专栏

前言

写项目的时候发现需要这么一个功能，需要给树懒加载上节点，我也不清楚我这方法是不是正经的懒加载，但是效果跟我见过的图片的懒加载差不多，俺寻思着应该就是了

其实要搞懒加载主要要解决几个问题

一、滚动条的容器是什么，也就是说这个滚动条我们是要监控全页面的，还是页面中某一个div中的滚动条，写法会有些不一样

二、怎么计算最后的位置，即使得不管滚动条距离如何加长，最后滚动条都是运行到最下面的时候再加载下一部分数据。（最后据我实践所得，在chrome浏览器中，给到的滚动条运行数据不像是像素，有点像像素x10）

三、解决滚动条在底部反复横跳导致的多次加载问题

问题一

//#号后面是div的id，据我多次测试，true应该是必须的，移除是会报错的（removeEventListener），所以我就没写移除
  mounted() {
    document.querySelector('#xxxx').addEventListener('scroll', this.handleScroll, true);
  },

问题二

	  //div的高度
	  let divHeight = document.querySelector("#xxxx").clientHeight;
	  //滚动内部区域的高度
      let scrollHeight = document.querySelector("#xxxx").scrollHeight;
      //滚动条滚动的高度
      let scrollTop = document.querySelector("#xxxx").scrollTop;
      //所以假如我想每次滚动条都是到最后小于20的高度时加载下一波数据，那么方法就是
      if(scrollHeight-divHeight-scrollTop<20){
      	console.log(1);
      }