vue混入page,触底加载，自动翻页

最新推荐文章于 2025-03-17 22:53:15 发布

伦苏ᝰ

最新推荐文章于 2025-03-17 22:53:15 发布

阅读量172

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/qq_54646196/article/details/130285272

版权

该组件使用`data`定义了分页和加载状态等属性，`methods`中包含处理滚动事件的方法`handleScroll`，当用户滚动到页面底部时触发加载更多数据。`searchFilter`方法用于处理过滤条件，而`getList`则负责从API获取并更新列表数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

export default {
	data() {
		return {
			loading: true,
			page: {
				pageNo: 1,
				pageSize: 10,
				more: 'loadmore',
				filter: {},
				op: {},
				search: ''
			},
			filter: {}, // 额外的查询参数，避免与多级查询混淆
			total: 0,
			rows: []
		};
	},

	methods: {
		handleScroll() {
			console.log('执行了');
			// 获取当前滚动位置与页面总高度的差值
			const scrollHeight = this.$refs.container.scrollHeight;
			const scrollTop = this.$refs.container.scrollTop;
			const clientHeight = this.$refs.container.clientHeight;
			const diff = scrollHeight - scrollTop - clientHeight;

			// 判断是否已经滚动到底部
			if (diff <= 0) {
				console.log('已经滚动到底部了！');
				this.loading = true;
				this.getList();
			}
		},
		searchFilter({ filter, sort, op }) {
			if (filter) {
				this.page.filter = filter;
			}
			if (sort) {
				this.page.order = sort.order;
				this.page.sort = sort.sort;
			}
			if (op) {
				this.page.op = op;
			}
			this.getList(1);
		},
		getList(pageNo) {
			if (!this.action) return;
			if (pageNo == 1) {
				this.$axios.post(this.action, this.page).then((res) => {
					console.log(res);
					this.rows = res.data.rows;
					this.total = res.data.total;
					this.loading = false;
				});
			} else {
				this.page.pageNo += 1;
				this.$axios.post(this.action, this.page).then((res) => {
					console.log(res);
					this.rows = this.rows.concat(res.data.rows);
					this.loading = false;
				});
			}
		}
	}
};

使用这个混入的组件，需要设置scoll调用混入组件函数的自动翻页