vue3 + ts +vant 从后端异步获取的数据 怎样使用van-list如何实现滚动到底部加载下一页的数据

你可以使用Vant的`List`组件和Vue的`$refs`来实现滚动到底部加载下一页的数据。具体步骤如下：

1. 在模板中使用`List`组件，并给它设置ref属性。

<template>
  <van-list ref="list">
    <!-- 列表内容 -->
  </van-list>
</template>

2. 在组件的`mounted`生命周期中给`List`组件绑定`scroll`事件。

export default {
  mounted() {
    this.$refs.list.$el.addEventListener('scroll', this.handleScroll)
  },
  methods: {
    handleScroll() {
      // 处理滚动事件
    }
  }
}

3. 在`handleScroll`方法中判断是否滚动到了底部，如果滚动到了底部就触发加载下一页的方法，然后将新数据添加到列表中。

export default {
  data() {
    return {
      page: 1, // 当前页数
      pageSize: 10, // 每页数据量
      list: [], // 列表数据
      loading: false, // 是否正在加载数据
      finished: false // 是否已经加载完所有数据
    }
  },
  mounted() {
    this.$refs.list.$el.addEventListener('scroll', this.handleScroll)
    this.loadMore()
  },
  methods: {
    handleScroll() {
      const list = this.$refs.list.$el
      const scrollHeight = list.scrollHeight
      const scrollTop = list.scrollTop
      const clientHeight = list.clientHeight
      if (scrollTop + clientHeight >= scrollHeight && !this.loading && !this.finished) {
        this.loadMore()
      }
    },
    async loadMore() {
      this.loading = true
      const res = await fetch(`/api/list?page=${this.page}&pageSize=${this.pageSize}`)
      const data = await res.json()
      if (data.length === 0) {
        this.finished = true
      } else {
        this.list = [...this.list, ...data]
        this.page++
      }
      this.loading = false
    }
  }
}

这样，当用户滚动到列表底部时，就会触发加载下一页的操作，然后将新数据添加到列表中。注意在加载数据时需要控制好`loading`和`finished`状态，避免重复加载数据和加载完所有数据后继续加载。