uni 下拉加载更多_uniapp上拉加载更多功能的简单实现

前提：安装了uniapp的LoadMore插件(一般初始都会安装此插件)， https://ext.dcloud.net.cn/plugin?id=29

... //渲染的列表处

//loading加载提示处

export default {

data() {

return {

videoList:[],

page:1,

pagesize:10,

loadStatus:'loading', //加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式

isLoadMore:false, //是否加载中

};

},

onLoad() {

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.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

}

},

});

},

}