vue中vant-list组件实现下拉刷新，上滑加载

后端返回的数据是一股脑的情况(不是按pageSize，pageNum一组一组的发送)时，前端使用vant-list实现懒加载需要再写一点js，记录一下

 

 main.js:

Vue.use(List);

Vue.use(PullRefresh);

template:

<van-pull-refresh v-model="refreshing" @refresh="onRefresh">

      <van-list

        v-model="loading"

        :finished="finished"

        finished-text="没有更多数据了"

        @load="onLoad">

        <div class="listOne" v-for="(item,index) in listAll" :key="index" v-show='item.arrtFlag'>           对原先渲染的对象名更改

             //每一条数据渲染的标签内,这里仅以index为例

            <span>{{index}}</span>

        </div>

     </van-list>

</van-pull-refresh>

data(){

      return{

         matchList:[],

         listAll: [],

         loading: false,

         finished: false,

         refreshing: false,

         dataLength:0, //原数组长度

         count: 0,

      }

    },

methods:{

    getfmatch(){

        // 一系列操作(请求接口，处理数据准备渲染页面的data)

        this.matchList = data

        this.dataLength = data.length

  },

   

 onLoad() {

        setTimeout(() => {

          if (this.refreshing) {

            this.listAll = [];

            this.refreshing = false;

          }

          this.count++

          console.log(this.count)                                       //打印当前上滑次数，按每次递增10条将this.matchList的每一条放进大数组listAll

          this.listAll = []

          for (let i = 0; i < 10*this.count; i++) {

            this.listAll.push(this.matchList[i]);

          }

          this.listAll = this.listAll.filter(item => item)          //因为是按10的倍数push数据，产生的undefined项需要被移除

          this.loading = false;

          if (this.listAll.length >= this.dataLength) {          //防止重复push　　

            this.finished = true;

          }

        }, 800);

      },

      onRefresh() {

        // 清空列表数据

        this.finished = false;

        // 重新加载数据

        // 将 loading 设置为 true，表示处于加载状态

        this.loading = true;

        this.onLoad();

      },

}