vant 上拉加载更多,下拉刷新

vant 是一个基于 Vue.js 的移动端组件库，提供了丰富的 UI 组件和交互功能。它也提供了上拉加载更多和下拉刷新的功能，方便开发者实现列表数据的无限滚动和数据刷新。

要在 vant 中实现上拉加载更多，可以使用 vant 的 `van-list` 组件配合 `van-pull-refresh` 和 `load-more` 属性。`load-more` 属性可以设置为一个函数，当滚动到底部时会触发该函数，从而执行加载更多的逻辑。

下面是一个简单的示例代码：

<template>
  <div>
    <van-list
      v-model="list"
      :finished="finished"
      :loading="loading"
      @load="onLoad"
    >
      <template v-slot:default="{ item }">
        <div class="item">{{ item }}</div>
      </template>
    </van-list>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        list: [],
        finished: false,
        loading: false,
        page: 1,
        pageSize: 10,
      };
    },
    methods: {
      onLoad() {
        this.loading = true;

        // 模拟异步请求数据
        setTimeout(() => {
          for (let i = 0; i < this.pageSize; i++) {
            this.list.push(`Item ${this.page * this.pageSize + i}`);
          }

          this.page++;

          if (this.list.length >= 50) {
            this.finished = true;
          }

          this.loading = false;
        }, 1000);
      },
    },
  };
</script>

要实现下拉刷新，可以在 `van-list` 上使用 `van-pull-refresh` 组件，并监听 `refresh` 事件，当用户下拉刷新时会触发该事件，从而执行刷新数据的逻辑。

下面是一个简单的示例代码：

<template>
  <div>
    <van-list
      v-model="list"
      :loading="loading"
      @refresh="onRefresh"
    >
      <template v-slot:default="{ item }">
        <div class="item">{{ item }}</div>
      </template>
    </van-list>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        list: [],
        loading: false,
      };
    },
    methods: {
      onRefresh() {
        this.loading = true;

        // 模拟异步请求数据
        setTimeout(() => {
          this.list = generateData();
          this.loading = false;        }, 1000);
      },
    },
  };
</script>