vant下拉加载更多,vant上拉加载
这篇文章主要介绍了使用栈实现数据分页及下拉加载方式。具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
目录
Vant-ui的货车清单实现数据分页加载主要三个属性栈上拉加载更多，下拉刷新
Vant-ui的van-list实现数据分页加载
！声明文档类型
html lang=en
头
meta charset=UTF-8
meta name= viewport content= width=device-width，initial-scale=1.0
标题相关数据分页，下拉加载/标题
link rel=样式表 href= https://cdn。jsdelivr。net/NPM/vant @ 2.11/lib/index。CSS rel=外部无跟随/
/头
风格
/风格
身体
div id=应用程序
van-list class= lazy v-model= loading :finished= finished finished-text=没有更多了@load=onLoad
:immediate-check=false
div v-for=(item，index)in list :key= index { { item } }/div
/van-list
/div
/body
脚本src= https://cdn。静态文件。org/jquery/2。1 .4/jquery。量滴js /脚本
脚本src= https://cdn。jsdelivr。net/NPM/vue @ 2.6/dist/vue。量滴js /脚本
脚本src= https://cdn。jsdelivr。net/NPM/vant @ 2.11/lib/vant。量滴js /脚本
脚本
var Vue=新Vue({
埃尔： #app ，
数据：{
列表：[],
第一页，
加载：假，
完：假的，
数量：0
},
已创建(){
this.getList()
},
已安装(){
},
方法：{
//请求公共方法
ajax(url，params，cb) {
$.ajax({
类型： post ，
网址：网址，
数据：参数，
数据类型： json ，
成功：功能（响应){
cb(响应)
}
});
},
onLoad() {
this.getList()
},
getList() {
让那个=这个
that.ajax(url ，{ kay: value }，function (res) {
if (res.errcode！=0) {
那个100美元吐司(资源消息)
返回错误的
}
if (that.page==1) {
that.list=res.data.list
}否则{
那个。列表=那个。列表。concat(RES . data。列表)
}
that.loading=false
那个页面
//最后一次请求返回的数据为空或小于10条，不在请求，完成=真
//根据业务需求更改
if(参考数据。列表。长度==0 分辨率数据。list==null RES . data。列表。长度10){
that.finished=true
返回
}
})
}
}
})
/脚本
/html
主要三个属性
注意：
v型车每次数据加载完成要置为假精加工置为错误的后将不再触发下拉加载立即检查置为错误的后，每次进入页面将不会触发负荷方法，防止进入页面多次加载
vant上拉加载更多，下拉刷新
1.html
van-pull-refresh v-model=正在加载 @ refresh= on refresh
货车清单
v-model=正在加载
：已完成="已完成"
:immediate-check=false
已完成-text=没有更多了呦
@load=onLoad
/van-list
/van-pull-refresh
2.js
返回{
isLoading: false，
加载：假，
第一页，
限制：10,
完：假的，
总计：0,//总共的数据条数
列表：[],
}
getHistory() {
常数历史数据={
page: this.page，
极限：此限制
}
返回新承诺((解决，拒绝)={
getHistory(historyData)。然后(res={
if (res.code===0) {
console.log(res，历史记录)
这个。总计=研究数据总计
this.finished=！res.data.hasNext
if(参考数据。列出研究数据。列表。长度0){
const tempList=res.data.list
//console.log(this.page)
如果(this.page 1) {
这个。列表=这个。列表。concat(临时列表)
}否则{
this.list=tempList //第一次加载
}
this.page=1
}否则{
this.list=[]
}
this.loading=false
解决()
}
})。接住(错误={
拒绝(错误)
})
})
},
onLoad() {
this.getHistory()
},
onRefresh() {
this.page=1
setTimeout(()={
this.getHistory()
Toast(“刷新成功”)
this.isLoading=false
}, 1000)
},
以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。