考试下拉刷新与触底加载

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

@@ -0,0 +1,73 @@
+<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>

pages/exam/index.vue

@@ -1,11 +1,18 @@
 <template>
-	<view>
-		考试
-	</view>
+	<mta-scroll-list @pull-down-refresh="onPulldownRefresh" @reach-buttom="onReachButtom" refreshUrl="/api/admin/config">
+		<card-item v-for="(item,index) in list" :key="index"></card-item>
+	</mta-scroll-list>
 </template>
 
 <script setup>
-	
+	import {ref} from "vue";
+	const list = ref([]);
+	function onPulldownRefresh(data) {
+		list.value = data;
+	}
+	function onReachButtom(data) {
+		list.value.concat(data);
+	}
 </script>
 
 <style>