vue-infinite-scroll 打开页面就加载直到最后一页

Question

页面

                <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就一直加载，页面刷新鼠标不动也会一直加载，看了源码，没发现什么问题，这个东西到底哪里疯了，求解答

Answer 1

Junnnnh 2018-09-22 17:33:34

我也遇到了这个问题，仔细阅读了下vue-infinite-scroll的官方文档。

其实除了老师说的三个参数外，还有其他参数可以设置。

其中有一个参数是 infinite-scroll-immediate-check ，默认值为true（String），这个参数会对你的浏览器容器进行检查，如果你当前请求的数据不足以填充浏览器容器，那么他就会一直请求数据，直到填满浏览器容器为止。如果浏览器容器没设置好就会出现下拉一次请求多次数据的情况。

不想修改容器就

直接把属性 infinite-scroll-immediate-check 设置为false就可以了

Answer 2

慕的地6861615 2019-01-11 15:41:12

有可能是你使用的UI框架有冲突。

Answer 3

河畔一角 2018-04-16 22:33:58

这个问题不太好口头描述，稍微有点饶。你对着视频课程做，如果完全参照也不行，那你加我53487746，抽时间我远程给你看看