vant下拉加载更多,vant 上拉加载
上拉加载下拉刷新功能在各类app中无处不在。本文主要介绍vue基于vant的上拉加载和下拉刷新的实现。通过示例代码详细介绍，有一定的参考价值，感兴趣的朋友可以参考一下。
前言
大家都很熟悉各种app中常见的上拉加载下拉刷新功能。一般来说，在数据量很大的情况下，为了渲染更快，给用户更好的视觉体验，我们会对数据进行分页，让其批量加载。这样渲染速度可以给用户更好的体验效果。话又说回来，分页处理，也就是我们今天要讲的上拉加载和下拉刷新。
实现思路
刷新：
将值赋给接口后，比较接口返回的数据长度和数据总数来控制加载和卸载状态。在下拉刷新方法中，将初始页码定义为第一页，将加载状态调整为false，最后调用请求数据的接口方法，并给出适当的灯光提示。
上拉负载：
首先，在数据中定义一个新数组，将新加载的数据与旧数据合并。在上拉加载方法中，加载的页码是递增的。然后，请求接口赋值，接口返回的数据被循环并添加到列表数组中。将返回数据的长度与数据总数进行比较，通过控制加载不加载的状态实现上拉加载。
事不宜迟，让我们开始示例开发。下面是我为了方便你而做的一个小演示。可以根据相关代码和注释快速上手。
模板
差异
！-van-pull-refresh:下拉刷新
van-pull-refresh v-model= is loading @ refresh= on refresh
！-拉起来装上-
van-list v-model= loading :finished= finished :immediate-check= false finished-text= no more
@load=onLoad :offset=20
div class= outer box v-for=(item，index) in list :key=index
公司名称：{{item.gsmc}}/div
Div行业类别：{{item.hylb}}/div
div的进入限制：{{item.jcxz}}/div
/div
/van-list
/van-pull-refresh
/div
/模板
脚本
从“@/API/enforcement”//import接口文件导入{getpassanalysislist}
导出默认值{
data() {
返回{
//传递到后端的参数
incomePayData: {
PageNumber: 1，//请求的是什么页面？
PageSize: 10，//每页的请求数
},
列表：[]，//列表数据
ListTwo: []，//用于上拉加载时合并数据。
总计：0，//总页数
IsLoading: false，//下拉刷新
Loading: false，//上拉加载
已完成：false，//加载和卸载状态
}
},
已安装(){
this . getpassanalysislist()；//列表数据接口
},
方法：{
//列表数据接口
getPassAnalysisList() {
getPassAnalysisList(this . incomepaydata)。然后(res={
if (res.code==10000) {
this . list=RES . data . records；//将接口返回给由赋值数据定义的数组
this . total=RES . data . total；//将接口返回的数据总数赋给data中定义的总数
if(this . list . length=this . total){//比较返回数据的长度与总件数，控制加载未加载的状态。
this.finished=true
}
}
})
},
//下拉刷新
onRefresh() {
this . incomepaydata . page number=1；//从第一页开始
this.finished=false//装载和卸载的状态
setTimeout(()={
this.isLoading=false//下拉刷新状态
This.getPassAnalysisList() //成功刷新调用列表方法。
这个。$toast(刷新成功)；//灯光提示信息
}, 700);
},
//上拉加载
onLoad() {
this . incomepaydata . page number；//加载时页码递增
getPassAnalysisList(this . incomepaydata)。然后(res={
if (res.code==10000) {
this . list two=RES . data . records；//将接口返回给由赋值数据定义的数组
this . total=RES . data . total；//将接口返回的数据总数赋给data中定义的总数
This.listTwo.forEach(item={//循环返回的数据并将其添加到列表中
this.list.push(项目)
})
//加载状态结束状态更新为false。
this.loading=false
if(this . list . length=this . total){//比较返回数据的长度与总件数，控制加载未加载的状态。
this.finished=true
}
}
})
},
}
}
/脚本
样式范围
/*外框的样式*/。外箱{
填充：10px
box-shadow: 0px 1px 4px rgba(0，0，0，0.3)，
0px 0px 20px rgba(0，0，0，0.1)inset；
边距：0px 16px 16px 16px
溢出：隐藏；
}
/风格
至此，这个小功能已经实现了。下图是实现的效果。有兴趣的可以私信自己试试。
关于vue基于vant的上拉加载和下拉刷新的这篇文章到此为止。更多相关vue vant上拉加载和下拉刷新内容，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。