-
使用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实现滚动加载
最新推荐文章于 2024-06-18 15:31:40 发布
文章介绍了两种在Vue中实现无限滚动加载数据的方法:一是使用watch属性监听DOM元素的滚动事件,当滚动到底部时触发加载更多数据;二是利用v-infinite-scroll自定义指令,配合vue-infinite-scroll插件来自动处理滚动加载。
摘要由CSDN通过智能技术生成