EP27 触底加载并且避免无效请求

文件路径： E:/homework/uniappv3tswallpaper/pages/classlist/classlist.vue

在 queryParams 中添加了 pageNum 和 pageSize 属性。
在 onReachBottom 周期中再次发起请求。
在请求函数中修改列表参数，将已经获取的数据和新获取的数据结构并重新拼接成新的数组。
在请求函数中添加判断条件。

<template>
	<view class="classlist">
		<view class="content">
			<navigator url="/pages/preview/preview" class="item" v-for="item in classList" :key="item._id">
				<image :src="item.smallPicurl" mode="aspectFill"></image>
			</navigator>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		apiGetCLassList
	} from '@/api/apis.js'
	import {
		onLoad,
		onReachBottom
	} from '@dcloudio/uni-app'

	const queryParams = {
		pageNum: 1,
		pageSize: 12
	}
	const noData = ref(false)

	onLoad(e => {
		console.log(e)
		let {
			id = null,
				name = null
		} = e
		uni.setNavigationBarTitle({
			title: name
		})
		queryParams.classid = id

		getClassList()
	})

	// 触底获取新数据
	onReachBottom(() => {
		if (noData.value) {
			return
		}
		queryParams.pageNum++
		getClassList()
	})
	
	// 定义列表参数
	const classList = ref([])

	const getClassList = async () => {
		let res = await apiGetCLassList(queryParams)
		classList.value = [...classList.value, ...res.data]
		if (queryParams.pageSize > res.data.length) {
			noData.value = true
		}
		console.log(111)
	}
</script>

<style lang="scss">
	.classlist {
		.content {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 5px;
			padding: 5rpx;

			.item {
				height: 440rpx;
				width: 100%;

				image {
					height: 100%;
					width: 100%;
					display: block;
				}
			}
		}
	}
</style>