vue实现的上拉加载更多数据/分页功能示例

2023-08-23 01:34:04 294

exportdefault{ name:'', data(){ return{ list:[], now_item:'', current_index:0, list_param:{page:1}, no_data:false, has_log:0 } }, components:{ XInput }, created(){ this.get('/api/index/index',this.list_param).then((data)=>{ this.list=data.data.data this.list_param.page+=1 }) window.addEventListener('scroll',this.onScroll) }, methods:{ onScroll(){ this.has_log=1 letinnerHeight=document.querySelector('#app').clientHeight letouterHeight=document.documentElement.clientHeight letscrollTop=document.documentElement.scrollTop //console.log(innerHeight+''+outerHeight+''+scrollTop) //console.log(outerHeight+scrollTop-30) //console.log(innerHeight) if(outerHeight+scrollTop===innerHeight+57){ if(this.no_data===true){ this.has_log=2 returnfalse } this.get('/api/index/index',this.list_param).then((data)=>{ if(data.data.data.length>0){ this.list=[...this.list,...data.data.data] this.list_param.page=this.list_param.page+1 this.has_log=0 }else{ this.has_log=2 this.no_data=true } }) } } } }

vue实现的上拉加载更多数据/分页功能示例

热门推荐

随机推荐