vue3实现容器内容滚动到底,触底加载新数据教程
作者：JackieDYH
本文介绍了在Vue3中实现scroll滚动加载的两种方法,包括手动监听滚动事件与使用vue-infinite-loading插件自动实现,详细解析了每种方法的具体步骤和代码示例,适合Vue开发者参考学习
scroll方式实现
在Vue3中，可以使用ref和onMounted钩子函数获取容器元素并监听滚动事件，判断内容是否滚动到了底部，从而触发加载新数据。
以下是一个简单的示例代码：
<template>
<div class="container" ref="container" @scroll="handleScroll">
<ul>
<li v-for="item in items" :key="item.id">{{ item.title }}</li>
<li v-if="loading">Loading...</li>
</ul>
</div>
</template>
<script>
import { ref, onMounted } from 'vue'
export default {
setup() {
const containerRef = ref(null)
const items = ref([])
const loading = ref(false)
const page = ref(1)
const handleScroll = () => {
const container = containerRef.value
if (container.scrollTop + container.clientHeight >= container.scrollHeight) {
loadMore()
console.log('到底了');
}
}
const loadMore = () => {
if (loading.value) return
loading.value = true
// 发送请求加载新数据
fetchData(page.value)
.then(newData => {
items.value = [...items.value, ...newData]
loading.value = false
page.value++
})
}
onMounted(() => {
// 初始化加载数据
loadMore()
})
return {
containerRef,
items,
loading,
handleScroll
}
}
}
</script>
在上面的示例中，containerRef使用ref获取了容器元素，items使用ref定义了列表数据，loading表示是否正在加载新数据，page表示当前页码数。
handleScroll函数是滚动事件的处理函数，首先获取容器元素，然后通过判断scrollTop和clientHeight是否等于scrollHeight来判断内容是否滚动到了底部，如果是则触发loadMore加载新数据。loadMore函数首先判断是否正在加载数据，如果是则直接返回，否则设置loading为true，然后发送请求加载新数据，将新数据和旧数据拼接起来，更新items，将loading设置为false，增加page的值。
最后，在onMounted钩子函数中初始化加载数据。
组件方式
可以使用vue-infinite-loading插件来实现容器内容滚动到底部时自动加载新数据。
步骤如下：
安装vue-infinite-loading插件，并将其引入到你的Vue项目中。
npm install vue-infinite-loading
import InfiniteLoading from 'vue-infinite-loading';
在需要实现滚动加载的容器内添加infinite-loading组件。
<template>
<div class="container" ref="container">
<div v-for="(item, index) in items" :key="index">{{ item }}</div>
<infinite-loading @infinite="loadMore" />
</div>
</template>在容器所在的组件中添加loadMore方法，用于加载新数据。
import axios from 'axios';
export default {
data() {
return {
items: [],
page: 1, // 当前页码
limit: 10, // 每页数据量
};
},
methods: {
async loadMore($state) {
const res = await axios.get(`/api/data?page=${this.page}&limit=${this.limit}`);
this.items.push(...res.data);
this.page++;
$state.loaded(); // 通知插件已加载完成
},
},
mounted() {
// 监听滚动事件，当滚动到底部时触发加载更多数据
this.$refs.container.addEventListener('scroll', () => {
if (this.$refs.container.scrollTop + this.$refs.container.clientHeight === this.$refs.container.scrollHeight) {
this.$refs.infiniteLoading.$emit('$InfiniteLoading:infinite');
}
});
},
};
通过以上步骤，就可以实现容器内容滚动到底部时自动加载新数据了。
当数据加载完成后，需要手动通知插件已完成加载，即调用$state.loaded()方法。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。