fs-uni-template/components/fs-loadmore/fs-loadmore.vue

<template>
	<view>
		<slot></slot>
		<fs-empty v-if="!state.loading && !state.dataList.length"></fs-empty>
		<template v-else>
			<fs-divider v-if="!state.hasMore">{{nomore}}</fs-divider>
		</template>
	</view>
</template>

<script setup>
import { reactive } from 'vue'

const props = defineProps({
	modelValue: {
		type: Array,
		default() {
			return []
		}
	},
	fetchList: Function,
	pageSize: {
		type: Number,
		default: 20
	},
	pullDownRefresh: Boolean,
	autoCall: {
		type: Boolean,
		default: true
	},
	nomore: {
		type: String,
		default: '没有更多了～'
	}
})
const emits = defineEmits(['update:modelValue'])

const state = reactive({
	loading: true,
	dataList: props.modelValue,
	pageNo: 1,
	pageSize: props.pageSize,
	hasMore: true
})

const query = (loadmore) => {
	state.loading = true
	if (loadmore) {
		state.pageNo++
	} else{
		state.pageNo = 1
	}
	return props.fetchList({
		pageNo: state.pageNo,
		pageSize: props.pageSize
	}).then(res => {
		state.hasMore = res.length >= state.pageSize
		state.dataList = loadmore ? [...state.dataList, ...res] : res
		emits('update:modelValue', state.dataList)
	}).finally(() => {
		state.loading = false
	})
}
props.autoCall && query()

const refresh = () => {
	state.dataList = []
	emits('update:modelValue', state.dataList)
	return query()
}

defineExpose({
	query,
	refresh,
	hasMore: state.hasMore,
	pullDownRefresh: props.pullDownRefresh
})
</script>

<style>

</style>