vue实现列表滑动下拉加载数据的方法
作者：在路上`
文章介绍了如何使用Vue实现列表滑动下拉加载数据的功能,通过监听滚动事件,检测用户是否滚动到底部,然后动态加载更多数据,附带了实现思路和案例代码,感兴趣的朋友一起看看吧
一、实现效果
二、实现思路
使用滚动事件监听器来检测用户是否滚动到底部，然后加载更多数据
- 监听滚动事件。
- 检测用户是否滚动到底部。
- 加载更多数据。
三、案例代码
<div class="drawer-content">
<div ref="loadMoreTrigger" class="load-more-trigger"></div>
<div v-if="isLoading" class="loading-button">
<button type="primary" loading>加载中...</button>
</div>
</div>
import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
const isLoading = ref(false);
const page = ref(1);
const loadMoreData = async () => {
if (isLoading.value) return;
isLoading.value = true;
// 模拟异步加载数据
setTimeout(() => {
const newItems: any = props.chartTableData
?.slice(0, 10)
.map((item) => ({ ...item, id: item.id + page.value * 100 }));
cardList.value = [...cardList.value, ...newItems];
page.value += 1;
isLoading.value = false;
}, 1000);
};
const handleScroll = () => {
const drawerContent = document.querySelector('.drawer-content');
if (drawerContent) {
const { scrollTop, scrollHeight, clientHeight } = drawerContent;
if (scrollTop + clientHeight >= scrollHeight - 10) {
loadMoreData();
}
}
};
onMounted(() => {
const drawerContent = document.querySelector('.drawer-content');
if (drawerContent) {
drawerContent.addEventListener('scroll', handleScroll);
}
});
onBeforeUnmount(() => {
const drawerContent = document.querySelector('.drawer-content');
if (drawerContent) {
drawerContent.removeEventListener('scroll', handleScroll);
}
});
.load-more-trigger {
height: 1px;
}
.loading-button {
text-align: center;
margin-top: 10px;
}到此这篇关于vue实现列表滑动下拉加载数据的文章就介绍到这了,更多相关vue下拉加载数据内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！