vue触底加载

最新推荐文章于 2025-03-18 19:01:01 发布

@WuKong

最新推荐文章于 2025-03-18 19:01:01 发布

阅读量1k

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_48768170/article/details/121285254

版权

本文介绍了如何在Vue.js应用中实现前端页面的触底加载功能，通过监听滚动事件，判断页面是否到达底部，并在达到条件时加载更多数据。涉及到的知识点包括JavaScript事件处理和Vue.js组件通信。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

methods:{
    onscrollData(){
        let that=this;
        this.$nextTick(() => {
            // this.initScroll()
            window.onscroll = function() {
                //变量scrollTop是滚动条滚动时，距离顶部的距离
                var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
                //变量windowHeight是可视区的高度
                var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
                //变量scrollHeight是滚动条的总高度
                var scrollHeight = document.documentElement.scrollHeight||document.body.scrollHeight;
                //滚动条到底部的条件
                if(scrollTop+windowHeight==scrollHeight){
                //写后台加载数据的函数
                }  
            })
   	 }
  },
  created(){
      this.onscrollData()
  }
}