uniProject/components/mta-scroll-list/mta-scroll-list.vue

<template>
	<view class="mta-refresh-list">
		<slot></slot>
	</view>
</template>

<script setup>
	import {
		onReachBottom,
		onLoad,
		onPullDownRefresh
	} from "@dcloudio/uni-app"

	import {
		ref
	} from "vue";

	const props = defineProps({
		refreshUrl: {
			type: String,
			default: '/api/admin/config'
		},
		options: {
			type: Object,
			default: () => {}
		},
		size: {
			type: Number,
			default: 10
		}
	})

	const Emits = defineEmits(['pull-down-refresh', 'reach-buttom']);

	/**
	 * 页码
	 */
	const page = ref(1);

	/**
	 * @summary 将请求转换为promise
	 */
	const transformUniRequestToPromise = (config) =>
		new Promise((resolve, reject) => {
			uni.request({
				...config,
				success(data) {
					resolve(data);
				},
				fail(err) {
					reject(err);
				},
			});
		});


	/**
	 * @summary 更新数据
	 * @param {String} action  'pull-down-refresh' | 'reach-buttom'
	 */
	async function getData(action) {
		try {
			// 刷新页码重置
			action === 'pull-down-refresh' && (page.value = 1);
			// 触底页码 加1
			action === 'reach-buttom' && (page.value++);

			const opt = {
				url: props.refreshUrl,
				method: "POST",
				data: {
					page: page.value,
					size: props.size,
					...props.options
				}
			}

			const data = await transformUniRequestToPromise(opt)

			action === 'pull-down-refresh' && (uni.stopPullDownRefresh());

			Emit(action, data)
		} catch (err) {
			console.log('错误', err)
			uni.stopPullDownRefresh()
		}
	}

	/**
	 * @summary 下拉刷新
	 */
	onPullDownRefresh(() => getData('pull-down-refresh'));

	/**
	 * @summary 加载完成 首次进行下拉刷新
	 */
	onLoad(() => uni.startPullDownRefresh());

	/**
	 * @summary 触底更新
	 */
	onReachBottom(() => getData('reach-buttom'));
</script>

<style lang="scss">

</style>