v-infinite-scroll无限滚动

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无限滚动

最新文章

热门文章