基于vue-infinite-loading的上拉加载

前言：

最近需要做一个消息上拉加载的功能，查询资料后发现vue-infinite-loading最好做。不过中间遇到部分难点，目前未发现文章有详细解决代码，为了后面的小伙伴方便，大概整理了一下。

测试文件全部代码

几处重点

1、force-use-infinite-wrapper属性

image.png

以上为官网解释，即主要用于标记容器

2、lastHeight意义（重点***）

初次定义为容器高度，在滚动条高度高于容易高度时，将滚动条移到高出的位置，即第一次超出会移动到最底部。

    if(this.$refs.list.scrollHeight > this.lastHeight) {
      this.$refs.list.scrollTop = this.$refs.list.scrollHeight - this.lastHeight;
        this.lastHeight = this.$refs.list.scrollHeight;
        $state.loaded();
      } else {
        $state.loaded();
      }

随后将lastHeight设为当前滚动条高度。如果再次触发上拉加载，再用加载后的滚动条高度减去lastHeight，这样页面就会处于加载后新数据的底部位置，不会再次触发上拉。除非继续上拉滚动条。这样功能就基本完成了。

3、$state.complete()

此方法主要用于终止上拉组件，在需要终止的逻辑下使用即可。另外几个slot插槽可再官方文档查看详细使用方法。在这不赘述了。

希望能帮到大家~