vue3实现滚动加载

实现列表滚动加载的两种方案

1. 使用ui组件库elementPlus

有一个指令v-infinite-scroll，用于列表下滑到底部时加载新的数据， 绑定一个函数load，该函数可以用于添加列表内容。例如调用api获取下一页数据内容。 另一个指令:infinite-scroll-disabled，为了禁用滚动加载，当load函数运行时或者已经没有数据取得时。
实现效果：Infinite | Element Plus (element-plus.org)

<template>
  <div class="infinite-list-wrapper" style="overflow: auto">
    <ul
      v-infinite-scroll="load"
      class="list"
      :infinite-scroll-disabled="disabled"
    >
      <li v-for="i in count" :key="i" class="list-item">{{ i }}</li>
    </ul>
    <p v-if="loading">Loading...</p>
    <p v-if="noMore">No more</p>
  </div>
</template>

2.使用js实现

大体思路一致，流程如下

具体实现：

关键是判断是否达到阈值，也就是滑动到达底部什么位置
对一个有滚动条的列表来说：
scrollTop表示滚动的距离，即离开屏幕内容的高度
offsetHight表示列表窗口的高度，一般固定不变
scrollHight表示列表的内容平摊开来时，即没有滚动条时的总高度
则离列表底部，即末尾内容的高度计算如下：
leftHight = scrollHight - scrollTop - offsetHight
当leftHight小于某个阈值时，就可以触发load信号，添加新的数据了