uni-app项目实战笔记19--触底加载更多和阻止无效请求

需求要点

1.当下拉到底部时，重新向后台发送请求，并将新获取的数据与上一个请求获取到的数据进行叠加；

2.当继续下拉触底，没有数据时，则阻止继续向后台发送无效请求。

技术实现要点

1.引入uniapp函数onReachBottom，在onReachBottom将页码数进行累加 ，querParams.pageNum++，并再次调用加载数据的方法，没有数据进返回：if(noData.value) return，不再往下执行；

2.数据叠加： classifyList.value = [...classifyList.value,...res.data]

3.判断是否还有下一页，如果没有，则不发送请求：res.data.length<querParams.pageSize。

代码实现

<script setup>
 import {ref} from 'vue'
 import {apiGetClassList} from "@/api/api.js"
 import {onLoad,onReachBottom} from "@dcloudio/uni-app"
 
//声明一个变量，标记是否还有数据
 const noData = ref(false)
 const querParams = {
	 pageNum:1,
	 pageSize:12
 }

 onReachBottom(()=>{
    //如果没有下一页数据，则返回，不再发送请求
	 if(noData.value) return
	 querParams.pageNum++
	  getClassList()
 })
 
 const classifyList = ref([])
 const getClassList = async () =>{
 	 let res = await apiGetClassList(querParams);
 	 classifyList.value = [...classifyList.value,...res.data]
	 //如果返回的数组元素个数小于每页条数，说明没有下一页了，没有下一页则不再向后台发送请求
	 if(res.data.length<querParams.pageSize){
		 noData.value = true
	 }
	 console.log(classifyList.value)
  }

  //调用方法加载数据
  onLoad((e)=>{
	 console.log(e)
	 let {classid=null,name=null} =e;
	 querParams.classid = classid
	 uni.setNavigationBarTitle({
	 	title:name
	 })
	 //调用获得分类列表方法
	 getClassList()
 })
</script>