shuhi-app/components/pageScroll/index.vue

<template>
	<mescroll-uni @init="mescrollInit" @down="downCallback" @up="upCallback" :height="height||windowHeight+'px'"
		:up="{textNoMore:'-- 没有更多了 --'}">
		<slot></slot>
	</mescroll-uni>
</template>

<script setup>
	import {
		computed,
		onMounted,
		ref,
		watch
	} from 'vue';
	import {
		onShow
	} from '@dcloudio/uni-app';
	import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js";
	import {
		store
	} from "@/store/index.js"


	// 调用mescroll的hook (注: mescroll-uni不用传onPageScroll,onReachBottom, 而mescroll-body必传)
	const {
		mescrollInit,
		downCallback,
		getMescroll
	} = useMescroll()

	const windowHeight = computed(() => {
		return store.clientHeight - props.diffHeight
	})

	const emit = defineEmits(['updateList', 'update:total'])
	const props = defineProps({
		request: {
			type: Function
		},
		requestStr: {
			type: String
		},
		isRefresh: {
			type: [Number, Boolean],
			default: 0
		},
		height: {
			type: [String, Number]
		},
		total: {
			type: [Number],
			default: 0
		},
		otherParams: {
			type: Object,
			default: () => ({})
		},
		diffHeight: {
			type: Number,
			default: 0
		},
		immediate: {
			type: Boolean,
			default: false
		}
	})

	const list = ref([])

	const getList = (mescroll) => {
		return new Promise((resolve, reject) => {
			let params = {
				pageNum: mescroll.num,
				pageSize: mescroll.size,
				...props.otherParams
			}
			uni.$u.http.get(props.requestStr, {
				params
			}).then(res => {
				emit('update:total', res.total)
				resolve(res)
			})
		})
	}

	// 上拉加载的回调: 其中num:当前页 从1开始, size:每页数据条数,默认10
	const upCallback = (mescroll) => {
		if (!props.requestStr) return;
		getList(mescroll).then(res => {
			const curPageData = res.rows || res.data || [] // 当前页数据
			if (mescroll.num == 1) list.value = []; // 第一页需手动制空列表
			list.value = list.value.concat(curPageData); //追加新数据
			emit('updateList', list.value)
			//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
			//mescroll会根据传的参数,自动判断列表如果无任何数据,则提示空;列表无下一页数据,则提示无更多数据;

			//方法一(推荐): 后台接口有返回列表的总页数 totalPage
			//mescroll.endByPage(curPageData.length, totalPage); //必传参数(当前页的数据个数, 总页数)

			//方法二(推荐): 后台接口有返回列表的总数据量 totalSize
			mescroll.endBySize(curPageData.length, res.total); //必传参数(当前页的数据个数, 总数据量)

			//方法三(推荐): 您有其他方式知道是否有下一页 hasNext
			//mescroll.endSuccess(curPageData.length, hasNext); //必传参数(当前页的数据个数, 是否有下一页true/false)

			//方法四 (不推荐),会存在一个小问题:比如列表共有20条数据,每页加载10条,共2页.如果只根据当前页的数据个数判断,则需翻到第三页才会知道无更多数据.
			// mescroll.endSuccess(curPageData.length); // 请求成功, 结束加载
		}).catch(() => {
			mescroll.endErr(); // 请求失败, 结束加载
		})
	}

	//重置列表
	const resetUpScroll = () => {
		emit('updateList', [])
		setTimeout(() => {
			getMescroll().resetUpScroll()
		}, 100)
	}

	const scroll = (e) => {
		emit('scroll', e)
	}

	defineExpose({
		resetUpScroll
	})
</script>

<style lang="scss" scoped>
	.item {
		line-height: 150rpx;
		border-bottom: 1px solid #ccc;
	}
</style>