vue 实现滚动加载
实现滚动加载的基本原理
滚动加载的核心逻辑是监听滚动事件，当用户滚动到页面底部或指定位置时触发数据加载。Vue中可以通过v-infinite-scroll指令或手动监听滚动事件实现。
使用v-infinite-scroll指令
Element UI等库提供了现成的无限滚动指令。安装Element UI后可直接使用：
<template>
<div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
<div v-for="item in list" :key="item.id">{{ item.content }}</div>
</div>
</template>
<script>
export default {
data() {
return {
list: [],
busy: false,
page: 1
}
},
methods: {
loadMore() {
this.busy = true
fetchData(this.page).then(res => {
this.list = this.list.concat(res.data)
this.page++
this.busy = false
})
}
}
}
</script>手动实现滚动监听
无第三方依赖的纯Vue实现方式：
<template>
<div class="scroll-container" @scroll="handleScroll">
<div v-for="item in items" :key="item.id">{{ item.text }}</div>
<div v-if="loading">加载中...</div>
</div>
</template>
<script>
export default {
data() {
return {
items: [],
loading: false,
page: 1,
hasMore: true
}
},
mounted() {
this.loadData()
},
methods: {
handleScroll(e) {
const { scrollTop, clientHeight, scrollHeight } = e.target
const bottomThreshold = 50 // 距底部50px触发
if (scrollHeight - (scrollTop + clientHeight) < bottomThreshold
&& !this.loading
&& this.hasMore) {
this.loadData()
}
},
async loadData() {
this.loading = true
const newItems = await fetchData(this.page)
this.items = [...this.items, ...newItems]
this.page++
this.hasMore = newItems.length > 0
this.loading = false
}
}
}
</script>
<style>
.scroll-container {
height: 500px;
overflow-y: auto;
}
</style>性能优化建议
添加防抖避免频繁触发滚动事件
import { debounce } from 'lodash-es'
methods: {
handleScroll: debounce(function(e) {
// 滚动逻辑
}, 200)
}使用Intersection Observer API实现更高效的检测
mounted() {
const observer = new IntersectionObserver((entries) => {
if (entries[0].isIntersecting && !this.loading && this.hasMore) {
this.loadData()
}
})
observer.observe(this.$refs.observerTarget)
}注意事项
确保在组件销毁时移除事件监听
beforeDestroy() {
window.removeEventListener('scroll', this.handleScroll)
}分页加载时需要处理无更多数据的情况
loadData() {
if (!this.hasMore) return
// ...加载逻辑
}
