下拉触底加载、调用事件，列表懒加载（vue）

最新推荐文章于 2024-06-27 16:37:52 发布

秃秃秃了

最新推荐文章于 2024-06-27 16:37:52 发布

阅读量1.4k

点赞数 2

分类专栏： js需求文章标签： vue.js 前端 javascript html

本文链接：https://blog.csdn.net/weixin_61285710/article/details/121958860

版权

前端开发懒加载滚动监听数据分页性能优化

关键词由CSDN通过智能技术生成

js需求专栏收录该内容

12 篇文章 0 订阅

订阅专栏

问题：在移动端或者PC端，都会有下拉或者鼠标想下滑列表，再次加载第二页的数据，以及更多页的数据，从而实现列表数据的懒加载

解决：可以监听滚动条的在视口的高度，达到某种程度上，从而实现需要进行的操作

上代码：

mounted() {
      // 监听
    window.addEventListener('scroll', this.onScroll)
  },
  destroyed() {
      // 销毁监听
    window.removeEventListener('scroll', this.onScroll)
  },
  methods:{
    onScroll(){
       // 滚动条在Y轴上的滚动距离
      const scrollTop = document.body.scrollTop || document.documentElement.scrollTop || window.pageYOffset
       // 浏览器视口的高度
      const clientHeight = document.body.clientHeight || document.documentElement.clientHeight
       // 文档的总高度
      const scrollHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight)
      if (scrollTop + clientHeight >= scrollHeight) {
        this.pageIndex++
        this.getSpeechList()
      }     
    }
  }