vue-infinite-loading 向上滚动加载

<template http-equiv="Access-Control-Allow-Origin" content="*">
  <div class="ul">
    <el-scrollbar class="chat-window scrollbar-hidden-x" ref="chatWindow">
      <infinite-loading
        :on-infinite="infiniteHandler"
        force-use-infinite-wrapper=".chat-window .el-scrollbar__wrap"
        direction="top"
        ref="infiniteLoading"
      >
        <div slot="no-more">没有更多消息</div>
        <div slot="no-results"></div>
      </infinite-loading>
      <div class="li" v-for="(item, index) in list" :key="index">
        <span>{{ item }}</span>
      </div>
    </el-scrollbar>
  </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: []
    };
  },

  methods: {
    infiniteHandler($state) {
      let _this = this;
      setTimeout(() => {
        this.list.push(this.num);
        // 除了第一次需要手动滚到底部，后面可以自己回到上个滚动的地方
        _this.$refs["chatWindow"].wrap.scrollTop = this.$refs[
          "chatWindow"
        ].wrap.scrollHeight;
        $state.loaded();
      }, 1000);
    }
  }
};
</script>

<style scoped>
.ul {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}
.li {
  width: 100%;
  height: 100px;
  margin: 4px 0;
  flex-shrink: 0;
  background-color: #eee;
}
.list {
  height: 100px;
  background-color: #eee;
  margin: 20px 0;
}
.list-con {
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}
</style>

1.遇坑：
因为项目中其他地方也用到了el-scrollbar组件，force-use-infinite-wrapper=‘.el-scrollbar__wrap’，造成无限加载的情况；
force-use-infinite-wrapper：一定要写清楚父元素，避免找错父元素一直无限加载。