Vant UI

下拉列表刷新组件

demo.vue

<template>
	<div class="list-container">
		<List ref="listRef" @onLoad="onLoad">
			<template v-slot:default>
				<Item v-for="item in dataList" :key="item.warnId" :data="item" @click.native="goDetail(item)" />
			</template>
		</List>
	</div>
</template>
<script setup lang="ts">
import { self_request } from '@/api/self_request.ts';
import { toRaw, ref } from 'vue';

const listRef = ref(null);
const { proxy }: any = getCurrentInstance();
const query = ref({
	pageNum: 1,
	pageSize: 10,
	headLine: '',
});
const warnList = ref([]);
const getWarnList = async (params?: any) => {
	query.value = { ...query.value, ...params };
	const res = await self_request('/wbAlert/page', 'get', toRaw(query.value)).catch((e) => e);
	const total = Number(res.data.total);
	if (res.code === '0') {
		if (res.data.list && res.data.list.length > 0) {
			// 列表拼接
			warnList.value = warnList.value.concat(res.data.list);
			// 判断是否还有下一页，长度小于总数，开始请求下一页
			if (warnList.value.length >= total) {
				listRef.value.finishedLoad();
			} else {
				// 继续加载数据
				query.value.pageNum += 1;
			}
			listRef.value.loading = false;
		} else {
			// 请求列表为空
			listRef.value.finishedLoad();
		}
		proxy.$vant.closeLoading();
	} else {
		// 请求失败
		listRef.value.finishedLoad();
		proxy.$vant.closeLoading();
	}
};
</script>

List.vue

<!--
    @Name: 列表
    @Description:
    @date: 2024/8/7
-->
<template>
	<van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
		<slot name="default"></slot>
	</van-list>
</template>

<script setup lang="ts">
const emit = defineEmits(['onLoad']);
const loading = ref(false);
const finished = ref(false);
const onLoad = () => {
	emit('onLoad');
};

const finishedLoad = () => {
	loading.value = false;
	finished.value = true;
};

defineExpose({
	loading,
	finished,
	finishedLoad,
});
</script>