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

const containerRef = ref(null)
const items = ref([
  {id:0,title:0},
  {id:1,title:1},
  {id:2,title:2},
  {id:3,title:3},
  {id:4,title:4},
  {id:5,title:5},
  {id:6,title:6},
  {id:7,title:7},
  {id:8,title:8},
  {id:9,title:9},
])
const loading = ref(false)
const page = ref(1)
const handleScroll = () => {
  const container = containerRef.value
  if (container.scrollTop + container.clientHeight >= container.scrollHeight) {
    loadMore()
    console.log('到底了');
  }
}

const loadMore = () => {
  if (loading.value) return
  loading.value = true
  // 下面发请求
  items.value.push({
    id:items.value.length,
    title:items.value.length
  })
  setTimeout(()=>{
    loading.value = false
    page.value++
  },2000)

}

onMounted(() => {
  // 初始化加载数据
  loadMore()
})

</script>

<template>
  <div class="container" ref="containerRef" @scroll="handleScroll">
    <h1 v-for="item in items" :key="item.id">{{ item.title }}</h1>
    <h1 v-if="loading">Loading...</h1>
  </div>
</template>

<style scoped>
.container{
  width: 300px;
  height:300px;
  overflow-y: scroll;
  background: palevioletred;
}
</style>