Vue3+Vant4.x使用van-pull-refresh和van-list实现下拉刷新和上拉加载功能

引入和注册组件

如果你配置按需加载，那么你先要引入和注册组件,在你的Vue3项目的入口文件（通常是main.js）中，引入并注册van-pull-refresh和van-list组件：

import { createApp } from 'vue';
import { PullRefresh,List } from 'vant';
//省略
const app = createApp(App);
app.use(PullRefresh);
app.use(List);
app.mount('#app');

使用van-pull-refresh和van-list

模拟数据

<script setup>
import { ref } from 'vue'
const refreshing = ref(false)
const list = ref([])
const loading = ref(false)
const finished = ref(false)
//请求接口数据
const loadData = () => {
  //请求接口
  const newData = []
  for (let i = 0; i < 10; i++) {
    newData.push({
      id: Math.random().toString(36).substr(2, 9),
      title: 'Item ' + Math.floor(Math.random() * 100)
    })
  }
  return newData
}
//下拉刷新
const onRefresh = () => {
  // 模拟下拉刷新
  setTimeout(() => {
    list.value = loadData() // 生成新的数据
    refreshing.value = false
    finished.value = false
  }, 1000)
}
//上拉加载
const onLoad = () => {
  // 模拟上拉加载
  setTimeout(() => {
    if (list.value.length >= 50) {
      finished.value = true // 数据加载完毕
    } else {
      list.value = [...list.value, ...loadData()] // 追加新的数据
    }
    loading.value = false
  }, 1000)
}
</script>

<template>
  <div class="list-wrap">
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-cell v-for="item in list" :key="item" :title="item.title" />
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<style scoped>
.list-wrap {
  padding-bottom: 50px;
}
</style>

在上面的示例中，我们使用了v-model="refreshing" 指令来绑定下拉刷新的状态，使用了v-model:loading指令来绑定上拉加载的状态，使用了:finished属性来判断是否加载完所有数据。当用户下拉刷新时，refreshing的值会被设置为true，然后触发@refresh事件。当用户滚动到底部时，@load事件会被触发。

在onRefresh方法中，我们模拟了下拉刷新的逻辑，生成了新的数据，并将refreshing和finished的值设置为false。

在onLoad方法中，我们模拟了上拉加载的逻辑，判断是否加载完所有数据，如果加载完毕则将finished设置为true，否则追加新的数据。

真实数据

<script setup>
import { ref } from 'vue'
import axios from 'axios'
const refreshing = ref(false)
const list = ref([])
const loading = ref(false)
const finished = ref(false)
const page = ref(1)
//请求接口数据
const loadData = () => {
  //请求接口
  if (refreshing.value) {
    // 下拉刷新时清空列表
    this.list = []
    finished.value = false
  }
  loading.value = true
  //发送请求
  axios
    .get('https://api.example.com/data', {
      params: {
        page: page.value
      }
    })
    .then((res) => {
      const newData = res.data
      if (newData.length === 0) {
        finished.value = true
      } else {
        list.value = [...list.value, ...newData]
      }
      loading.value = false
      refreshing.value = false
    })
    .catch((error) => {
      console.error(error)
      loading.value = false
      refreshing.value = false
    })
}
//下拉刷新
const onRefresh = () => {
  finished.value = false
  loading.value = true
  page.value = 1
  loadData()
}
//上拉加载
const onLoad = () => {
  loading.value = true
  page.value++
  loadData()
}
</script>

<template>
  <div class="list-wrap">
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-cell v-for="item in list" :key="item" :title="item.title" />
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<style scoped>
.list-wrap {
  padding-bottom: 50px;
}
</style>