VUE 实现下拉分页加载更多功能
VUE 实现下拉分页加载更多功能~html<div class="con_item" v-for="item in pageArr"><div class="name" >{{item.name}}</div></div><div class="loading" style="display: none" ref="load...
·
VUE 实现下拉分页加载更多功能~
html
<div class="con_item" v-for="item in pageArr">
<div class="name" >{{item.name}}</div>
</div>
<div class="loading" style="display: none" ref="loading">
<img src="../assets/loading.gif" >
<span>正在加载更多数据</span>
</div>
<div class="text" style="display: none" ref="text">
<span>没有更多数据啦</span>
</div>
js
data(){return{pageNum:1,propertyData:'',totalnum:'',pageArr:[],}},
//滚动事件监听处理
mounted(){
window.addEventListener('scroll',this.handleScroll)
},
//滚动事件监听处理
handleScroll(){
//是否滚动到底部判断
if((document.documentElement.scrollTop+window.innerHeight)==document.body.offsetHeight){
this.getpageData()
}},
}
//请求列表数据
async getApiData(){
var that=this;
let proData= await API.ajaxGet(url,{
'pageNum':this.pageNum,
'pageSize':10
})
that.propertyData=proData.data.data.resultList
that.totalnum=proData.data.data.pages
把每次请求的数据放入一个数组里
that.propertyData.forEach((item)=>{
that.pageArr.push(item)
})
},
//判断pageNum的值,并显示加载符号
getpageData(){
var that=this
if(that.pageNum<this.totalnum){
that.$refs.loading.style.display="block"
that.pageNum++
setTimeout(function(){
that.getApiData()
},1000)
}else{
setTimeout(function(){
that.$refs.loading.style.display="none"
that.$refs.text.style.display="block"
},5000)
}
},
更多推荐
已为社区贡献4条内容
所有评论(0)