好资源导航 » 文章资讯 » vue实现的上拉加载更多数据/分页功能示例

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

2023-08-23 01:34:04 67

本文实例讲述了vue实现的上拉加载更多数据/分页功能。分享给大家供大家参考，具体如下：

加载状态

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.js程序设计有所帮助。

返回顶部
514930285
czq8825@qq.com

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

热门推荐

随机推荐