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

Posted 2021-10-08 web半晨

目录

• • 1、html部分
  • 2、css部分
  • 3、JavaScript部分

---

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 }}</div>
		<div v-text="item.age"></div>
	</div>
</div>

---

2、css部分

.Record-frame {
	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;
			});
		}
	}
};

---

原文链接