文件路径: 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} = euni.setNavigationBarTitle({title: name})queryParams.classid = idgetClassList()})// 触底获取新数据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>