【vue 监听页面滑动到底部】

监听页面滑动到底部

IntersectionObserver

在 Vue 中监听触底可以通过使用IntersectionObserver实现。IntersectionObserver是一个可以异步观察目标元素与其祖先或视窗交叉状态的API。当目标元素进入或退出视口时,会触发IntersectionObserver的回调函数。

以下是一个监听触底的示例:

vue 复制代码
<template>
  <div class="container" ref="container">
    <!-- 这里是数据列表 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      observer: null,
    }
  },
  mounted() {
    // 创建 IntersectionObserver 实例
    this.observer = new IntersectionObserver(this.handleObserve, {
      root: null,
      rootMargin: '0px',
      threshold: 1.0,
    });
    // 监听容器底部
    this.observer.observe(this.$refs.container.lastChild);
  },
  methods: {
    handleObserve(entries) {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          // 滚动到底部触发加载更多
          this.loadMoreData();
        }
      });
    },
    loadMoreData() {
      // 加载更多数据的逻辑
    },
  },
};
</script>

在mounted钩子函数中创建IntersectionObserver实例,并监听容器底部的元素。在handleObserve回调函数中判断当前元素是否可见,如果可见则触发加载更多数据的逻辑。

scroll 事件监听器

在 Vue 中监听页面滑动到底部的方法如下:

  1. 创建一个 scroll 事件监听器,并将事件绑定在根元素上(windowdocument.body)。
js 复制代码
mounted() {
  window.addEventListener('scroll', this.handleScroll)
}
  1. 在事件处理函数 handleScroll 中,判断页面滚动到底部的条件,如果条件成立,执行自定义事件 scroll-to-bottom
js 复制代码
methods: {
  handleScroll() {
    const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
    const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight
    const clientHeight = document.documentElement.clientHeight || window.innerHeight
    if (scrollTop + clientHeight >= scrollHeight) {
      this.$emit('scroll-to-bottom')
    }
  }
}
  1. 在需要监听滚动到底部的组件中,使用 $on 方法监听自定义事件 scroll-to-bottom,并执行相应的操作。
html 复制代码
<template>
  <div>
    <div v-for="item in list" :key="item.id">{{ item.text }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: []
    }
  },
  mounted() {
    this.loadMore()
    this.$on('scroll-to-bottom', this.loadMore)
  },
  methods: {
    loadMore() {
      // TODO: 加载更多数据
    }
  }
}
</script>
相关推荐
前端付豪3 分钟前
13、表格系统架构:列配置、嵌套数据、复杂交互
前端·javascript·架构
南屿im9 分钟前
发布订阅模式和观察者模式傻傻分不清?一文搞懂两大设计模式
前端·javascript
JustHappy11 分钟前
SPA?MPA?有啥关系?有啥区别?聊一聊页面形态 or 路由模式
前端·javascript·架构
每天开心11 分钟前
🧙‍♂️闭包应用场景之--防抖和节流
前端·javascript·面试
归于尽19 分钟前
Generator?从 yield 卡壳,到终于搞懂协程那点事
前端·javascript
FogLetter20 分钟前
React组件开发进阶:本地存储与自定义Hooks的艺术
前端·javascript·react.js
GISer_Jing28 分钟前
前端开发—全栈开发
前端·javascript
DoraBigHead36 分钟前
小Dora 的 JavaScript 修炼日记 · Day 1:变量三兄弟与作用域迷宫
前端·javascript·面试
Trust yourself2431 小时前
easyui碰到想要去除顶部栏按钮边框
前端·javascript·easyui
一洽客服系统1 小时前
网页嵌入与接入功能说明
开发语言·前端·javascript