vue2无限滚动触发事件

最新推荐文章于 2025-02-19 09:45:29 发布

旭很不戳

最新推荐文章于 2025-02-19 09:45:29 发布

阅读量425

点赞数

文章标签：前端框架

本文链接：https://blog.youkuaiyun.com/zx960103/article/details/120689668

版权

本文介绍了一种Vue组件的实现方式，该组件用于处理页面滚动到底部时加载更多数据的场景。通过监听滚动事件，结合防抖节流技术，当用户滚动到页面底部时触发加载请求，并通过父组件传递的`show`布尔值来控制请求的发送，确保请求不会在用户快速滚动时频繁触发。同时，组件还提供了`change`事件通知父组件可以发送新的请求。

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

详细操作:

父盒子引入组件 - 放到浏览器的最底端 - 里面传个(show)的Boolean值防止发送请求失败 - 还有个change事件,触底后会触发这个触底事件,表示可以发送请求了,发送请求前先把传的(show)改为fasle,数据请求回来再给他改为true

代码:

<template>
  <div ref="srcoll"></div>
</template>

<script>
export default {
  data() {
    return {
      time: null
    };
  },
  props:{
      show:{
        type:Boolean
      }
  },
  mounted() {
    window.addEventListener("scroll", this.dome); // 页面的滚动事件
  },
  methods: {
    // 详细操作:父盒子引入组件 - 放到浏览器的最底端 - 里面传个(show)的Boolean值防止发送请求失败 - 还有个change事件,触底后会触发这个触底事件,表示可以发送请求了,发送请求前先把传的(show)改为fasle,数据请求回来再给他改为true  
      
    dome() {
      let num = this.$refs.srcoll.offsetTop;  // 最底端DOM元素距离最顶端的距离
      let aee = window.pageYOffset;           // 页面滚动卷进去的距离
      let sum = window.innerHeight;           // 浏览器视口的高度
      if (num - aee < sum) {    // 底端DOM到最顶端 - 页面卷进去的距离 < 视口高度