vue滚动加载更多
2019-10-11 本文已影响0人
Wo信你个鬼
data中的变量
data(){
return{
list:[],
isBot:true, //到底部
page:0
}
}
created生命周期调用方法
created(){
this.getNewsList();
}
methods中写getNewsList方法
methods:{
getNewsList(){
//请求文章数据
this.$require.get(config.newsList,{
params:{
page:this.page
}
}).then((res)=>{
if(res.data.data.rows.length>0){
this.isBot = true;
res.data.data.rows.forEach(val=>{
console.log("val",val)
this.list.push(val)
})
}
console.log("文章数据",res)
})
}
}
mounted:在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作。再次调用getNewsList方法
mounted(){
var winH = window.innerHeight;
console.log(winH)
window.addEventListener("scroll",()=>{
var content = document.querySelector(".content");
if (content == null) {
return
}
var conPosi = content.getBoundingClientRect();
console.log("conPosi",conPosi)
if(winH+10>=conPosi.bottom && this.isBot == true){
this.isBot = false;
this.page++;
this.getNewsList();
console.log("到底了")
}
})
}