注意: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组件库实现上拉加载
注:本人前端小白 ,如有不对的地方还请多多指教