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就可以了

2
0

慕的地6861615

2019-01-11

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

0
0

河畔一角

2018-04-16

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

0
0

Vue2.6+Node.js+MongoDB 全栈打造商城系统

课程全面升级,Vue2.6+Koa2,从前端入门全栈,让你的未来更宽广

2634 学习 · 924 问题

查看课程