vue vant-list 加载问题汇总
上拉实现数据加载效果
分批加载数据实现原理主要是通过检测滚动条是否到底来触发load事件。主要的变量是finished和loading。
注:有时出现不能触发@load事件可能有3种原因:1、van-list父容器height设置成100%了;2、finished和loading值控制有问题。3、把van-list抽成组件了,可以把内部循环体抽成独立组件,但不能把van-ist一起抽出。
参考样例
div中
<van-list
v-model="loading"
:finished="finished"
@load="onLoad"
finished-text="没有更多了"
:immediate-check="false"> 禁止初次加载
<van-card v-for="(item,index) in dataList" :key="index" >
</>
data中
{
dataList: [],
finished: false,
loading: false,
pageIndex: 1, // 分页
pageSize: 6, // 每页条数
total: 0, // 数据总条数
}
methods中
getInfoTest () {
this.$http({
url: '/',
method: 'get',
params: {
'page': this.pageIndex,
'limit': this.pageSize
}
}).then(({data}) => {
if (data && data.code === 0) {
data.page.records.forEach((item,index)=>{
this.dataList.push(item) // 数据追加
})
this.totalPage = data.page.total
this.loading = false
if(this.dataList.length < this.totalPage){
this.finished = false // 数据未加载完
}else {
this.finished = true // 数据加载完
}
}
})
},
//
onLoad (){
this.pageIndex++
this.getInfoTest()
}