首页vue2 scroll事件判断触底

vue2 scroll事件判断触底

时间: 2025-02-15 13:16:53 浏览: 38

在 Vue.js 中，如果你想要监听滚动事件并检测元素是否到达底部，你可以使用 `scroll` 或者 `@scroll` 事件，并结合滚动高度和视口高度来进行判断。这里是一个简单的例子： ```html <template> <div id="app" ref="myRef">  </div> </template> <script> export default { data() { return { isBottom: false, }; }, mounted() { this.checkScroll(); }, methods: { checkScroll() { const appRef = this.$refs.myRef; if (appRef && appRef.scrollTop + appRef.clientHeight === appRef.scrollHeight) { this.isBottom = true; // 判断是否到达底部 } else { this.isBottom = false; } window.addEventListener('scroll', this.checkScroll); }, // 如果不需要一直监听滚动，可以在某个操作后移除事件监听 unmount() { window.removeEventListener('scroll', this.checkScroll); }, }, }; </script> ``` 在这个示例中，当页面滚动到 `myRef` 元素的底部时，`isBottom` 将变为 `true`。你可以根据这个布尔值调整你的组件行为。

阅读全文