文件路径: 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>