安装uni-load-more插件
<template> <view class="container"> <view v-for="(item,index) in videoList" :key="index">...</view> //渲染的列表处 <view v-show="isLoadMore"> //loading加载提示处 <uni-load-more :status="loadStatus" ></uni-load-more> </view> </view> </template> <script> export default { data() { return {
//列表 videoList:[], page:1, pagesize:10, loadStatus:'loading', //加载样式:more-加载前样式,loading-加载中样式,nomore-没有数据样式 isLoadMore:false, //是否加载中 }; }, onl oad() { this.getVideoList() }, onReachBottom(){ //上拉触底函数 if(!this.isLoadMore){ //此处判断,上锁,防止重复请求 this.isLoadMore=true this.page+=1 this.getVideoList() } }, methods:{ getVideoList(){ uni.request({ url: `${this.$baseUrl}/api-video/getlist?page=${this.page}&pagesize=${this.pagesize}`, method: 'GET', success: res => { if(res.data.code==200){ if(res.data.data.list){ this.videoList=this.videoList.concat(res.data.data.list) if(res.data.data.list.length<this.pagesize){ //判断接口返回数据量小于请求数据量,则表示此为最后一页 this.isLoadMore=true this.loadStatus='nomore' }else{ this.isLoadMore=false } }else{ this.isLoadMore=true this.loadStatus='nomore' } }else{ //接口请求失败的处理 uni.showToast({title:res.data.msg,icon:'none'}) this.isLoadMore=false if(this.page>1){ this.page-=1 } } }, fail: () => { //接口请求失败的处理 uni.showToast({title: '服务器开小差了呢,请您稍后再试',icon:'none'}) this.isLoadMore=false if(this.page>1){ this.page-=1 } }, }); }, } </script>