-
使用Vue的watch属性监听dom元素的滚动事件,当滚动到底部时,触发加载更多数据的方法。
<template> <div class="container" ref="scrollContainer" @scroll="handleScroll"> <div v-for="item in items">{ { item }}</div> </div> </template> <script> export default { data() { return { items: [], page: 1, isLoading: false, }; }, mounted() { this.getItems(); }, methods: { getItems() { this.isLoading = true; // 发送请求获取数据,此处省略 // 假设请求成功后将数据push进items数组中 this.items.push(...data); this.isLoading = false; }, handleScroll() { const scrollContainer = this.$refs.scrollContainer; const distanceToBottom = scrollContainer.scrollHeight - (scrollContainer.scrollTop + scrollContainer.clientHeight); if (distanceToBottom < 10 && !this.isLoading) { this.pa
AI生成--Vue实现滚动加载
![](https://img-home.csdnimg.cn/images/20240711042549.png)