Infinite Scrolling 无限滚动 ​

<template>
  <f-infinite-scrolling :on-scroll-end="onScrollEnd">
    <div v-for="item in length" :key="item" class="f-infinite-scrolling-item" style="">
      {{ item }}
    </div>
  </f-infinite-scrolling>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'

  const length = ref(20)

  const onScrollEnd = (): void => {
    setTimeout(() => {
      length.value += 10
    }, 1000)
  }
</script>

<style scoped>
  .f-infinite-scrolling {
    height: 400px;
  }

  .f-infinite-scrolling-item {
    width: 100%;
    height: 40px;
    background-color: #96acf8;
    color: #fff;
    margin: 5px 0;
    text-align: center;
    line-height: 40px;
  }
</style>