vant实现上拉加载（vue2/vue3）_vant 上拉加载

注意：vue2采用的2.13.2版本vant组件库   vue3采用的4.8.1版本vant组件库 

多的不说直接上代码

vue2实现上拉加载

<template>
    <div class="branch">
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" class="list">
            <van-cell v-for="item in cmpyBranchInfo" :key="item.id">
                <slot slot="title">
                    <p class="title">{{ item.name }}</p>
                </slot>
            </van-cell>
        </van-list>
    </div>
</template>
<script>
import {
    getCmpyBranchInfo
} from '@/api/debtor'
export default {
    data() {
        return {
            cmpyBranchInfo: [],
            loading: false,
            finished: false,
            total: 0,
            page: 1,
            size: 10
        }
    },
    mounted() {
        this.onLoad()
    },
    methods: {
        onLoad() {
            setTimeout(() => {
                this.init()
            }, 500);
        },
        init() {
            const params = {
                pageNum: this.page,
                pageSize: this.size
            }
            getCmpyBranchInfo(params).then((res) => {
                this.cmpyBranchInfo = [...this.cmpyBranchInfo, ...res.data.data.data]
                this.total = res.data.data.total
                this.loading = false
                this.page += 1
                if (this.cmpyBranchInfo.length >= res.data.data.total) {
                    this.finished = true
                }
                this.loading = false
            })
        }
    }
}
</script>
<style lang="scss" scoped>
.branch {
    .list {
        .title {
            font-size: 14px;
            color: #1990FF;
        }
    }
}
</style>

vue3实现上拉加载

<template>
    <div class="branch">
      <van-list
        :loading="loading"
        :finished="finished"
        @load="onLoad"
        finished-text="没有更多了"
        offset="10"
        class="list"
        :immediate-check="false"
      >
        <van-cell v-for="item in cmpyBranchInfo" :key="item.id">
            <template #title>
                <p class="title">{{ item.name }}</p>
            </template>
        </van-cell>
      </van-list>
    </div>
  </template>
  <script setup>
  import { ref,onMounted } from 'vue'
  import { getCmpyBranchInfo } from '@/api/debtor'
  const cmpyBranchInfo = ref([])
  const loading = ref(false)
  const finished = ref(false)
  const total = ref(0)
  const page = ref(0)
  const size = ref(20)
  
  onMounted(() => {
    onLoad()
  })
  
  const onLoad = () => {
    setTimeout(() => {
      page.value += 1
      init()
    }, 500);
  };
  const init = () => {
    const params = {
      pageNum: page.value,
      pageSize: size.value
    }
    getCmpyBranchInfo(params).then((res) => {
      cmpyBranchInfo.value = [...cmpyBranchInfo.value, ...res.data.data.data]
      total.value = res.data.data.total
      loading.value = false
      if (cmpyBranchInfo.value.length >= res.data.data.total) {
        finished.value = true
      }
      loading.value = false
    })
  }
  </script>
  
  <style lang="scss" scoped>
  .branch {
    .list {
      min-height: 100vh;
      height: auto;
      .title {
        font-size: 14px;
      }
    }
  }
  </style>

图片预览vue2/vue3配合vant组件库实现上拉加载

注：本人前端小白 ，如有不对的地方还请多多指教