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);

	function transformUniRequestToPromise(config) => new Promise((resolve, reject) => uni.request(...config, success(data) {resolve(data)}, fail(err) {reject(err)})

	async function getData(action) {
		try {
			action === 'pull-down-refresh' && (page.value = 1)

			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()
		}
	}

	onPullDownRefresh(() => getData('pull-down-refresh'))

	onLoad(() => uni.startPullDownRefresh())

	onReachBottom(() => getData('reach-buttom'))
</script>

<style lang="scss">

</style>