vue如何实现无限滚动
实现无限滚动的基本思路
无限滚动（Infinite Scroll）的核心是通过监听滚动事件，在用户接近页面底部时动态加载更多数据。Vue中可以通过原生滚动事件或第三方库实现。
使用原生滚动事件实现
在Vue组件中，通过@scroll监听滚动事件，计算是否接近底部并触发加载：
<template>
<div class="scroll-container" @scroll="handleScroll">
<div v-for="item in items" :key="item.id">{{ item.content }}</div>
<div v-if="loading">Loading...</div>
</div>
</template>
<script>
export default {
data() {
return {
items: [],
loading: false,
page: 1
}
},
methods: {
handleScroll(e) {
const { scrollTop, clientHeight, scrollHeight } = e.target
const isNearBottom = scrollTop + clientHeight >= scrollHeight - 100
if (isNearBottom && !this.loading) {
this.loadMore()
}
},
async loadMore() {
this.loading = true
const newItems = await fetchData(this.page++)
this.items = [...this.items, ...newItems]
this.loading = false
}
},
mounted() {
this.loadMore()
}
}
</script>
<style>
.scroll-container {
height: 500px;
overflow-y: auto;
}
</style>使用vue-infinite-loading插件
安装插件：
npm install vue-infinite-loading使用示例：
<template>
<div>
<div v-for="item in items" :key="item.id">{{ item.content }}</div>
<infinite-loading @infinite="loadMore"></infinite-loading>
</div>
</template>
<script>
import InfiniteLoading from 'vue-infinite-loading'
export default {
components: { InfiniteLoading },
data() {
return {
items: [],
page: 1
}
},
methods: {
async loadMore($state) {
try {
const newItems = await fetchData(this.page++)
if (newItems.length) {
this.items = [...this.items, ...newItems]
$state.loaded()
} else {
$state.complete()
}
} catch (err) {
$state.error()
}
}
}
}
</script>优化性能的注意事项
避免频繁触发滚动事件，可以使用节流函数（throttle）控制触发频率：
import { throttle } from 'lodash'
methods: {
handleScroll: throttle(function(e) {
// 滚动逻辑
}, 300)
}对于大量数据渲染，建议使用虚拟滚动技术（如vue-virtual-scroller）提升性能。
清除事件监听器，防止内存泄漏：
beforeDestroy() {
window.removeEventListener('scroll', this.handleScroll)
}
