关于Jeecg uniapp 使用 mescroll 无法上拉加载

2023年7月10日11:05:54

关于Jeecg uniapp 使用 mescroll 无法上拉加载

修改/common/mixin/Mixin.js
下拉刷新时

this.mescroll.resetUpScroll();
this.page.num = 1;

Mixin.js

/**
 * 下了列表混入
 * @type {{data(): *, methods: {upCallback(*): void, downCallback(): void, loadList(*): void}}}
 */
const ListMixin = {
	data() {
		return {
			downOption: {
				auto: false, //是否在初始化完毕之后自动执行下拉回调callback; 默认true
			},
			upOption: {
				page: {
					num: 0,
					size: 8,
					time: null
				}
			},
			queryParam: {
				pageNo: 1,
				pageSize: 8
			},
			list: [],
			pageNo: 1,
			pageSize: 8,
		}
	},
	methods: {
		/*下拉刷新的回调 */
		downCallback() {
			//加载列表数据
			this.loadList('down');
		},
		/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
		upCallback(page) {
			let param = this.queryParam;
			param.pageNo = page.num;
			param.pageSize = page.size;

			if (page.num == 1) {
				this.list = [];
			}
			console.log("upCallback==param::", param)
			this.$http.get(this.url, {
				params: param
			}).then(res => {
				console.log("upCallback请求返回res", res)
				if (res.data.success) {
					let rec = res.data.result.records;
					let hasNext = true;
					if (!rec || rec.length < this.pageSize) {
						console.log("加载完成!没有更多了")
						hasNext = false;
					}
					console.log("hasNext", hasNext)
					//方法四 (不推荐),会存在一个小问题:比如列表共有20条数据,每页加载10条,共2页.如果只根据当前页的数据个数判断,则需翻到第三页才会知道无更多数据.
					this.mescroll.endSuccess(rec.length);

					//设置列表数据
					this.list = this.list.concat(rec);
					this.$forceUpdate();
				} else {
					this.mescroll.endErr();
				}
			}).catch(() => {
				//加载失败, 结束
				this.mescroll.endErr();
			})
		},
		loadList(flag) {
			let param = this.queryParam
			param.pageNo = this.pageNo,
				param.pageSize = this.pageSize
			console.log("请求参数", param)
			this.$http.get(this.url, {
				params: param
			}).then(res => {
				if (res.data.success) {
					console.log("请求返回res.data", res.data)
					let rec = res.data.result.records
					console.log("rec");
					console.log(rec);
					if (flag == 'down') {
						//下拉刷新成功的回调,隐藏下拉刷新的状态
						this.mescroll.endSuccess();
						this.mescroll.resetUpScroll();
						this.page.num = 1;
					}
					//添加新数据
					this.list = rec;
					// if (!rec || rec.length < this.pageSize) {
					// 	console.log("加载完成!")
					// }
				} else {
					console.log("请求返回else", res)
					this.mescroll.endErr();
				}
			}).catch((err) => {
				console.log("请求返回err", err)
				//加载失败, 结束
				this.mescroll.endErr();
			})
		},
	}

}

export default ListMixin;


  • 作者:qidixiaoxian
  • 原文链接:https://blog.csdn.net/qidixiaoxian/article/details/124431382
    更新时间:2023年7月10日11:05:54 ,共 1842 字。