v-infinite-scroll无限滚动

2022-11-20,,,

v-infinite-scroll="loadMore"表示回调函数是loadMore
infinite-scroll-disabled="busy"表示由变量busy决定是否执行loadMore,false则执行loadMore,true则不执行,注意,busy表示繁忙,繁忙的时候是不执行的。
infinite-scroll-distance="10"这里10决定了页面滚动到离页尾多少像素的时候触发回调函数,10是像素值。一般情况下会在页尾做一个几十像素高的“正在加载中...”,这样的话,可以把这个div的高度设为infinite-scroll-distance的值即可。
infinite-scroll-immediate-check 默认值为true,该指令表示,应该在绑定后立即检查busy的值和是否滚动到底。假如你的初始内容高度不够,不足以填满可滚动的容器的话,你应设为true,这样会立即执行一次loadMore,会帮你填充一些初始内容。
infinite-scroll-listen-for-event 当事件在Vue实例中发出时,无限滚动将再次检查。
infinite-scroll-throttle-delay 检查busy的值的时间间隔,默认值是200,因为vue-infinite-scroll的基础原理是,vue-infinite-scroll会循环检查busy的值,以及是否滚动到底,只有当:busy为false且滚动到底,回调函数才会执行

  1.重复加载。初次进入列表页,会加载两次或者多次数据,造成重复加载的原因,罪魁祸首是 infinite-scroll-disabled,在 loadMore 方法里 有一句 this.loading = true,把  infinite-scroll-disabled 的值设置为了true,它的作用就是,当你进入页面是,会检查如果第一次请求的数据没有撑满你的容器(list-data),就会立即再次执行 v-infinite-scroll 绑定的方法(loadMore),第二次没有撑满,会执行第三次

  解决方法:

  页面初始加载时在created里获取初始数据data紧接着判断data.length>=rows 这里的rows为一页要显示的数据量满足条件则busy置为false(定义时busy为true)

如果要用数据对容器进行填充,那么必须设置容器高度 也可以是屏幕高度,不然无法触发loadMore事件
在进行异步请求之前,需要调用this.busy= true, 数据请求完成后 再设置 this.busy = false(放在axios请求的外面,避免不断重复加载的现象)

v-infinite-scroll无限滚动的相关教程结束。

《v-infinite-scroll无限滚动.doc》

下载本文的Word格式文档,以方便收藏与打印。