vue-infinite-scroll 打开页面就加载直到最后一页
来源:9-4 商品列表分页和排序功能实现(下)

慕UI0367381
2018-04-10
页面
<div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="20">
加载中。。。
</div>
js
mounted(){
this.getContentList()
},
methods: {
getContentList(flag){
let params = {
page:this.page,
pageSize:this.pageSize,
sort:1
}
axios.get('/content', {
params:params
}).then(res => {
let data = res.data;
if (data.status > '0') {
if (flag) {
this.datalist = this.datalist.concat(data.result.list);
if (res.data.result.count < this.pageSize) {
this.busy = true;
console.log(77)
}else{
console.log(79)
this.busy = false;
}
} else {
this.datalist = data.result.list;
console.log(84)
this.busy = false;
}
} else {
this.datalist = []
}
})
},
loadMore(){
console.log(123)
this.busy = true;
setTimeout(() => {
this.page++;
this.getContentList(true)
},2000)
}
}
打开页面就会一直发请求,直到没有数据 busy = true才会停下来,只要是busy = false就一直加载,页面刷新鼠标不动也会一直加载,看了源码,没发现什么问题,这个东西到底哪里疯了,求解答
3回答
-
Junnnnh
2018-09-22
我也遇到了这个问题,仔细阅读了下vue-infinite-scroll的官方文档。
其实除了老师说的三个参数外,还有其他参数可以设置。
其中有一个参数是 infinite-scroll-immediate-check ,默认值为true(String),这个参数会对你的浏览器容器进行检查,如果你当前请求的数据不足以填充浏览器容器,那么他就会一直请求数据,直到填满浏览器容器为止。如果浏览器容器没设置好就会出现下拉一次请求多次数据的情况。
不想修改容器就
直接把属性 infinite-scroll-immediate-check 设置为false就可以了
20 -
慕的地6861615
2019-01-11
有可能是你使用的UI框架有冲突。
00 -
河畔一角
2018-04-16
这个问题不太好口头描述,稍微有点饶。你对着视频课程做,如果完全参照也不行,那你加我53487746,抽时间我远程给你看看
00
相似问题