【完全指南】vue+vant实现上拉加载下拉刷新，加速你的页面响应速度

本文主要是介绍【完全指南】vue+vant实现上拉加载下拉刷新，加速你的页面响应速度，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

前言

当我们在使用移动端应用时，经常会遇到需要上拉加载更多数据或下拉刷新数据的功能。而基于 vue 框架和 vant 库，实现这样的功能将会变得十分简单和便捷。本文将介绍如何使用 vant 组件库实现上拉加载和下拉刷新功能，并为读者提供详细的代码示例和演示效果。如果你想让你的移动端应用更加流畅和用户友好，那么不要错过这篇文章！

实现思路

下拉刷新：

请求接口赋完值后，将接口返回数据长度与总条数进行比较控制加载不加载的状态，在下拉刷新方法中定义起始页码为第一页，调整加载的状态为 false，最后调用请求数据的接口方法，做适当轻提示即可。

上拉加载：

首先在data中定义一个新的数组用于将新加载的数据与老的数据合并，在上拉加载方法中让加载的页码递增，然后请求接口进行赋值，将接口返回数据循环并将数据添加到list数组中，将返回数据长度与总条数进行比较控制加载不加载的状态实现上拉加载。

话不多说，下面进入实例开发。以下是我为了方便大家理解做的一个小 demo，大家可以根据相关代码及注释快速上手操作。

<template><div><!-- van-pull-refresh：下拉刷新 --><van-pull-refresh v-model="isLoading" @refresh="onRefresh"><!-- 上拉加载 --><van-list v-model="loading" :finished="finished" :immediate-check="false" finished-text="没有更多了"@load="onLoad" :offset="20"><div class="outerBox" v-for="(item,index) in list" :key="index"><div>公司名称：{{item.gsmc}}</div><div>行业类别：{{item.hylb}}</div><div>进车限值：{{item.jcxz}}</div></div></van-list></van-pull-refresh></div>
</template>
<script>import {getPassAnalysisList} from '@/api/enforcement' //引入接口文件export default {data() {return {//传递给后端的参数incomePayData: {pageNumber: 1, //请求第几页pageSize: 10, //每页请求的数量},list: [], //列表数据listTwo: [], //用于上拉加载时将数据合并total: 0, //总页数isLoading: false, //下拉刷新loading: false, //上拉加载finished: false, //加载与不加载的状态}},mounted() {this.getPassAnalysisList(); //列表数据接口},methods: {//列表数据接口getPassAnalysisList() {getPassAnalysisList(this.incomePayData).then(res => {if (res.code == '10000') {this.list = res.data.records; //将接口返回赋值data定义的数组this.total = res.data.total; //将接口返回的总数据条数赋值data中定义的totalif (this.list.length >= this.total) { //将返回数据长度与总条数进行比较控制加载不加载的状态this.finished = true;}}})},//下拉刷新onRefresh() {this.incomePayData.pageNumber = 1; //起始为第一页this.finished = false; //加载与不加载的状态setTimeout(() => {this.isLoading = false; //下拉刷新状态this.getPassAnalysisList() //刷新成功调用列表方法this.$toast('刷新成功'); //轻提示信息}, 700);},//上拉加载onLoad() {this.incomePayData.pageNumber++; //加载时页码递增getPassAnalysisList(this.incomePayData).then(res => {if (res.code == '10000') {this.listTwo = res.data.records; //将接口返回赋值data定义的数组this.total = res.data.total; //将接口返回的总数据条数赋值data中定义的totalthis.listTwo.forEach(item => { //循环返回的数据并将数据添加到list中this.list.push(item)})// 加载状态结束 状态更新为falsethis.loading = false;if (this.list.length >= this.total) { //将返回数据长度与总条数进行比较控制加载不加载的状态this.finished = true;}}})},}}
</script>
<style scoped>/* 外层盒子的样式 */.outerBox {padding: 10px;box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.3),0px 0px 20px rgba(0, 0, 0, 0.1) inset;margin: 0px 16px 16px 16px;overflow: hidden;}
</style>

实现效果

在这里插入图片描述

第二种实现方式

<template><div class="containerBox"><!-- 下拉刷新组件 --><van-pull-refresh v-model="isLoading" @refresh="onRefresh"><!-- 列表组件 --><van-list v-model="loading" :finished="finished" :finished-text="bomTitle" @load="onLoad" :offset="20"><!-- 列表项 --><div v-for="(item, index) in list" :key="index" class="listBox"><div><span>联系人</span><span>{{ item.lxr ? item.lxr : "--" }}</span></div><div><span>电话</span><span>{{ item.lxdh ? item.lxdh : "--" }}</span></div><div><span>地址</span><span>{{ item.qydz ? item.qydz : "--" }}</span></div></div></van-list></van-pull-refresh></div>
</template><script>
// 接口文件
import { informPort } from '@/api/entrance/index'
export default {data() {return {dataSet: {limit: 20,page: 1,qymc: ''},list: [], // 列表数据isLoading: false, // 控制下拉刷新的加载状态loading: false, // 控制上拉加载的加载状态finished: false, // 是否已加载完全部数据bomTitle: '' // 上拉加载完成时的文本}},methods: {// 获取列表数据informPort(flag) {informPort(this.dataSet).then(res => {if (res.code == 10000 && res.data) {let dataList = res.data.recordsif (dataList && dataList.length) {if (flag) {this.list = dataList} else {this.list = [...this.list, ...dataList]}}this.pageTotal = res.data.totalthis.loading = falseif (this.list.length >= this.pageTotal) {this.bomTitle = '到底了~ ' + '共计' + res.data.total + '条'this.finished = true} else {this.dataSet.page += 1this.bomTitle = ''}}})},// 搜索onSearch() {this.dataSet.page = 1this.finished = falsethis.list = []this.informPort(true)},// 下拉刷新onRefresh() {this.dataSet.page = 1this.finished = falsethis.list = []setTimeout(() => {this.isLoading = false // 结束下拉刷新的加载状态this.informPort(true) // 重新获取列表数据this.$toast('刷新成功')}, 300)},// 上拉加载onLoad() {this.informPort() // 获取更多列表数据}}
}
</script>