van-pull-refresh 懒加载滑动加载数据

如果你想在使用 `van-pull-refresh` 组件的同时实现滑动加载数据的功能，可以结合使用 `van-pull-refresh` 和 `van-list` 组件。

首先，在模板中使用 `van-pull-refresh` 和 `van-list` 组件来创建下拉刷新和滑动加载的效果。示例如下：

<template>
  <div>
    <van-pull-refresh @refresh="onRefresh">
      <van-list v-model="list" :finished="finished" @load="onLoad">
        <template #default="{ item }">
          <!-- 渲染每个数据项的内容 -->
          <van-cell :title="item.title" :value="item.value" />
        </template>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [], // 初始化为空数组
      finished: false, // 滑动加载是否已完成
      page: 1, // 当前页码
    };
  },
  methods: {
    onRefresh() {
      // 下拉刷新时的逻辑
      // 可以发送异步请求获取最新数据
      // 示例中使用 setTimeout 模拟异步请求
      setTimeout(() => {
        // 假设请求返回的数据是数组
        const data = [
          { title: 'Title 1', value: 'Value 1' },
          { title: 'Title 2', value: 'Value 2' },
          { title: 'Title 3', value: 'Value 3' },
        ];
        // 更新列表数据
        this.list = data;
        // 取消下拉刷新状态
        this.$refs.pullRefresh.finishPullDown();
      }, 1000);
    },
    onLoad() {
      // 滑动加载时的逻辑
      // 可以发送异步请求获取更多数据
      // 示例中使用 setTimeout 模拟异步请求
      setTimeout(() => {
        // 假设请求返回的数据是数组
        const data = [
          { title: 'Title 4', value: 'Value 4' },
          { title: 'Title 5', value: 'Value 5' },
          { title: 'Title 6', value: 'Value 6' },
        ];
        // 更新列表数据
        this.list = this.list.concat(data);
        // 如果已加载完所有数据，设置 finished 为 true
        if (this.page >= 3) {
          this.finished = true;
        }
        // 加载完成后调用 finishLoad 方法
        this.$refs.list.finishLoad();
        // 增加页码
        this.page++;
      }, 1000);
    },
  },
};
</script>

在上述示例中，`van-pull-refresh` 组件用于实现下拉刷新的效果，当下拉刷新触发时，会调用 `onRefresh` 方法。在 `onRefresh` 方法中，可以发送异步请求获取最新的数据，并更新列表数据。最后，通过 `finishPullDown` 方法取消下拉刷新状态。

`van-list` 组件用于实现滑动加载的效果，当滑动加载触发时，会调用 `onLoad` 方法。在 `onLoad` 方法中，可以发送异步请求获取更多的数据，并更新列表数据。通过 `finishLoad` 方法告知组件加载完成。

请注意，以上示例中的异步请求使用了 setTimeout 来模拟，实际情况下需要使用适当的方式发送请求。另外，根据具体需求，你可能需要调整代码来满足你的需求。