vue+element中的 InfiniteScroll 无限滚动 实现分页请求数据

1、html部分

<div class="Record-frame" v-infinite-scroll="infiniteScroll" :infinite-scroll-disabled="isInfiniteScroll" :infinite-scroll-distance="5" > <div v-for="item in dataList" :key="item.id"> <div>{{ item.name }} height: 470px; overflow-y: scroll; } 

3、JavaScript部分

export default { name: "LinkageRecord", data() { return { dataList: [], total: 0, query: { pageNum: 1, pageSize: 10, }, isInfiniteScroll: false, // 控制滚动禁用 }; }, methods: { // 滚动条触底 infiniteScroll() { this.isInfiniteScroll = true; this.getLinkRecordV1ListS(); }, // 获取数据 getData() { getAxios(this.query).then((response) => { let { total, records } = response; this.dataList = [...this.dataList, ...records]; this.total = total; this.query.pageNum += 1; if (records.length < this.query.pageSize || this.dataList.length == this.total) { this.isInfiniteScroll = true; return false; } this.isInfiniteScroll = false; }); } } }; 

原文链接