vue vant-list 加载问题汇总

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()
}