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

前言：

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

测试文件全部代码

<template>
  <div class="chat-window" ref="list">
    <infinite-loading
      :on-infinite="infiniteHandler"
      force-use-infinite-wrapper=".chat-window"
      direction="top"
      ref="infiniteLoading"
    >
      <div slot="spinner">小弟拼命加载中...</div>
      <div slot="no-more">已加载完毕!</div>
      <div slot="no-results">暂无数据:(</div>
    </infinite-loading>
    <div v-for="(item, $index) in list" :key="$index">
      {{`第${item}条数据`}}
    </div>
  </div>
</template>

<script>
import InfiniteLoading from "vue-infinite-loading"; // 滚动加载 https://peachscript.github.io/vue-infinite-loading/guide/#import

export default {
  name: "ChatMessage1",
  components: { InfiniteLoading },
  data() {
    return {
      num: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
      list: [],
      lastHeight: 0
    };
  },
  methods: {
    infiniteHandler($state) {
      let _this = this;
      const temp = [];     
      for (let i = this.list.length + 1; i <= this.list.length + 10; i++) {         
        temp.unshift(i);       
      }       
      this.list = temp.concat(this.list);
      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();
      }
      if(this.list.length > 80) {
        $state.complete();
        return;
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.lastHeight = this.$refs.list.clientHeight;
    })
  }
};
</script>
<style scoped>
.chat-window {
  display: flex;
  flex-direction: column;
  /height: 100%; 
  overflow-x: hidden;
  overflow-y: auto; 
}
</style>

几处重点

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插槽可再官方文档查看详细使用方法。在这不赘述了。

希望能帮到大家~