前言：
最近需要做一个消息上拉加载的功能，查询资料后发现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插槽可再官方文档查看详细使用方法。在这不赘述了。
希望能帮到大家~
