vue3实现列表滚动

在Vue3中，实现列表滚动通常会涉及到组件的模板、计算属性以及事件处理。你可以通过监听滚动事件来控制列表的行为。以下是一个简单的例子：

1. 首先，在组件模板部分，给列表容器添加`ref`属性以便获取DOM元素和滚动位置：

<template>
  <div ref="listContainer" class="scrollable-list">
    <!-- 列表项... -->
  </div>
</template>

2. 然后，在script部分，创建一个计算属性来检查是否达到滚动底部：

<script setup>
import { onMounted } from 'vue';

const listContainerRef = ref(null);
let isScrolledToBottom = ref(false);

onMounted(() => {
  const handleScroll = () => {
    const container = listContainerRef.value;
    if (container.scrollTop + container.offsetHeight === container.scrollHeight) {
      isScrolledToBottom.value = true;
    } else {
      isScrolledToBottom.value = false;
    }
  };
  
  // 观察滚动事件
  window.addEventListener('scroll', handleScroll);
  // 初始滚动状态设置
  handleScroll();
});
</script>

3. 当`isScrolledToBottom`变为`true`时，可以触发相应的操作，比如加载更多数据：

<template>
  <button v-if="isScrolledToBottom" @click="loadMoreData">加载更多</button>
</template>

<script>
// ...
methods: {
  loadMoreData() {
    // 加载更多数据并更新列表...
  },
}
</script>