uniProject/components/custom-scroll-list/custom-scroll-list.vue

<template>
	<!-- 查询区域 -->
	<uni-search-bar class="uni-mt-10" v-model="name" radius="100" v-if="hasSearcBar" :placeholder="placeholder"
		:bgColor="searchBarColor" clearButton="auto" cancelButton="none" @confirm="onSearch" @blur="onSearch" />
	<!-- tab选择区域 -->
	<view class="lli-status-box" v-if="hasTab">
		<text :class="['status-item', activeTab === item.value? 'click':'' ]" v-for="item in tabList" :key="item.value"
			@click="onTavChange(item)">{{item.label}}</text>
	</view>
	<!-- 无限滚动区域 -->
	<scroll-view class="scroll-container" :scroll-y="true" :refresher-enabled="true" :refresher-triggered="triggered"
		:refresher-threshold="100" refresher-background="#F3F3F4" @refresherrefresh="onRefresh"
		@scrolltolower="onReachBottom" @refresherrestore="onRestore">
		<slot :list="list"></slot>
		<uni-load-more :status="status" :contentText="contentText"></uni-load-more>

		<!-- 		<view style="width: 100%;text-align: center;font-size: 14px;color:#ccc;" key="a333" v-if="isComplete">没有更多啦~
		</view> -->
	</scroll-view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		computed,
	} from "vue";

	import {
		onLoad
	} from "@dcloudio/uni-app"

	const props = defineProps({
		refreshFn: {
			type: Function,
			required: true
		},
		tabData: {
			type: Object
		},
		size: {
			type: Number,
			default: 5
		},
		hasSearcBar: {
			type: Boolean,
			default: true,
		},
		searchBarKey: {
			type: String,
			default: 'name'
		},
		hasTab: {
			type: Boolean,
			default: true,
		},
		defaultTab: {
			type: [String, Number]
		},
		tabList: {
			type: Array,
			default: () => [],
		},
		tabKey: {
			type: String,
			default: 'status'
		},
		placeholder: {
			type: String,
			default: '请输入考试名称'
		},
		searchBarColor: {
			type: String,
			default: "#F3F3F4"
		},
		tabData: {
			type: Object,
		}

	})

	const page = ref(1);
	const list = ref([]); // 项目列表
	const triggered = ref(false); // 是否触发下拉刷新
	const freshing = ref(false); // 是否加载中
	const total = ref(0); // 项目总数
	const name = ref(''); // 查询名
	const activeTab = ref(props.defaultTab);

	const status = ref('more');
	const contentText = {
		contentdown: '查看更多',
		contentrefresh: '加载中',
		contentnomore: '没有更多'
	}
	/**
	 * 是否已完全加载
	 */
	const isComplete = computed(() => {
		if (total.value === 0) {
			return false;
		}

		return total.value === list.value.length
	})

	// 重置
	function reset() {
		list.value = [];
		page.value = 1;
		triggered.value = false;
		freshing.value = false;
		total.value = 0;
		status.value = 'more';
	}

	// 切换tab
	function onTavChange(item) {
		activeTab.value = item.value;
		name.value = "";
		reset();
		getData("do-search");
	}

	// 查询
	function onSearch({
		value
	}) {
		name.value = value;
		reset();
		getData("do-search");
	}

	// 获取数据
	function getData(action) {
		const options = Object.assign({}, {
			page: page.value,
			size: props.size,
		});

		if (props.hasTab) {
			options[props.tabKey] = activeTab.value;
		}

		if (props.hasSearcBar) {
			options[props.searchBarKey] = name.value;
		}
		props.refreshFn(options).then(res => {
			total.value = res.data.total;
			action === "do-search" && (list.value = res.data.data); // 查询更新
			action === "pull-down-refresh" && (list.value = res.data.data); // 下拉更新数据
			action === "reach-buttom" && (list.value = [...list.value, ...res.data.data]); // 无限滚动更新数据



		}).finally(() => {
			triggered.value = false;
			freshing.value = false;
			if (total.value !== list.value.length) {
				status.value = 'more';
			} else {
				status.value = 'noMore';
			}
		})
	}

	onLoad(() => {
		freshing.value = false;
		setTimeout(() => {
			triggered.value = true
		}, 50)
	})

	// 下拉刷新触发
	function onRefresh() {
		if (freshing.value) return;
		status.value = 'loading';
		freshing.value = true;
		triggered.value = true;
		page.value = 1;
		getData('pull-down-refresh');
	}

	// 下拉刷新复位
	function onRestore() {
		triggered.value = 'restore'; // 需要重置
	}

	// 无限滚动
	function onReachBottom() {
		if (freshing.value) return;
		if (isComplete.value) return;
		freshing.value = true;
		page.value++;
		getData('reach-buttom')
	}
</script>

<style lang="scss">
	.scroll-container {
		height: calc(100vh - 220rpx)
	}
</style>