vue无限滚动实现教程
Vue无限滚动实现方法
使用第三方库vue-infinite-loading
安装vue-infinite-loading库：
npm install vue-infinite-loading --save在组件中引入并使用：
import InfiniteLoading from 'vue-infinite-loading';
export default {
components: {
InfiniteLoading
},
data() {
return {
items: [],
page: 1
};
},
methods: {
loadMore($state) {
axios.get(`/api/items?page=${this.page}`)
.then(({ data }) => {
if (data.length) {
this.items.push(...data);
this.page++;
$state.loaded();
} else {
$state.complete();
}
});
}
}
}模板部分：
<template>
<div>
<div v-for="item in items" :key="item.id">
{{ item.content }}
</div>
<infinite-loading @infinite="loadMore"></infinite-loading>
</div>
</template>原生实现无限滚动
监听滚动事件实现：
export default {
data() {
return {
items: [],
isLoading: false,
page: 1,
hasMore: true
};
},
mounted() {
window.addEventListener('scroll', this.handleScroll);
this.loadItems();
},
beforeDestroy() {
window.removeEventListener('scroll', this.handleScroll);
},
methods: {
handleScroll() {
const scrollY = window.scrollY;
const visible = window.innerHeight;
const pageHeight = document.documentElement.scrollHeight;
const bottomOfPage = visible + scrollY >= pageHeight - 200;
if (bottomOfPage && !this.isLoading && this.hasMore) {
this.loadItems();
}
},
loadItems() {
this.isLoading = true;
axios.get(`/api/items?page=${this.page}`)
.then(({ data }) => {
if (data.length) {
this.items = [...this.items, ...data];
this.page++;
} else {
this.hasMore = false;
}
this.isLoading = false;
});
}
}
}使用Intersection Observer API
现代浏览器支持的更高效方式：
export default {
data() {
return {
items: [],
observer: null,
page: 1
};
},
mounted() {
this.observer = new IntersectionObserver((entries) => {
if (entries[0].isIntersecting) {
this.loadMore();
}
});
this.observer.observe(this.$refs.loader);
this.loadMore();
},
methods: {
loadMore() {
axios.get(`/api/items?page=${this.page}`)
.then(({ data }) => {
if (data.length) {
this.items = [...this.items, ...data];
this.page++;
}
});
}
}
}模板中添加触发元素：
<div ref="loader"></div>注意事项
- 确保API接口支持分页查询
- 处理加载状态和错误情况
- 移动端需要考虑滚动性能优化
- 大量数据渲染时使用虚拟滚动技术提高性能
- 清除事件监听和观察器避免内存泄漏
