Переглянути джерело

Merge remote-tracking branch 'origin/main'

# Conflicts:
#	.gitignore
wangguoyu 10 місяців тому
батько
коміт
cba0a197f9
3 змінених файлів з 124 додано та 7 видалено
  1. 6 3
      .gitignore
  2. 107 0
      components/mta-scroll-list/mta-scroll-list.vue
  3. 11 4
      pages/exam/index.vue

+ 6 - 3
.gitignore

@@ -1,4 +1,7 @@
+node_modules/
+.project
+unpackage/
 .DS_Store
-node_modules
-.idea
-
+wxcomponents/**/*.vue
+wxcomponents/**/*.css
+.hbuilderx/

+ 107 - 0
components/mta-scroll-list/mta-scroll-list.vue

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

+ 11 - 4
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>