实现 h5 页面中的滚动加载

在 h5 页面中总是有这样的场景，你查看商品的时候，随着你的滚动，数据在不断增加，这个是如何实现的呢？

思路

这里我打个比方，叫做“看不到底”。

如图，我们在屏幕容器中看内容，随着我们的滑动，内容不断往上，但是内容不想让我们看到底，所以，在感觉我们快到底的时候，内容就去加载一些数据插入在底部的上面，继续填充，让你看不到内容的底。

具体到前端代码，这里主要是根据一个公式 scrollHeight - scrollTop - clientHeight > 临界值，如图

具体实现（vue3演示）

我们在页面中加载很多卡片来填充内容

<template>
  <div class="item" v-for="item in arr" :key="item">
    {{ item }}
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
const arr = ref(new Array(20).fill(0).map((_, i) => i));
</script>

<style scoped>
.item {
  width: 180px;
  height: 80px;
  border-radius: 20px;
  background-color: blanchedalmond;
  margin: auto;
  margin-top: 10px;
  text-align: center;
  line-height: 80px;
}
</style>

监听滚动事件，监听 scrollTop、scrollTop 的变化

由于我们这边滚动的是 document，所以我们调用document相关的方法

function addEvent() {
  window.addEventListener("scroll", function (el: any) {
    // 这里是 el.target 是 document
    const scrollHeight = el.target.documentElement.scrollHeight;
    const scrollTop = el.target.documentElement.scrollTop;
    const clientHeight = el.target.documentElement.clientHeight;
  });
}

判断是否到达临界值，如果到达，添加新的内容

const limit = 100; // 这个值就看你是不是敏感肌了
if (scrollHeight - scrollTop - clientHeight < limit) {
  arr.value.push(...new Array(20).fill(0).map((_, i) => i));
}

实现如下

总结

这样就实现了一个简单的滚动加载

但其实还有别的事情可以做，比如说

• 节流
• 加载过多节点如何进行优化