vue上拉加载List 列表

介绍

Vant框架
瀑布流滚动加载，用于展示长列表，当列表即将滚动到底部时，会触发事件并加载更多列表项。

在main.js或单页面引入

import Vue from 'vue';
import { List } from 'vant';

Vue.use(List);

代码演示

<van-list
  v-model="loading"
  :finished="finished"
  finished-text="没有更多了"
  @load="onLoad"
>
  <van-cell
    v-for="item in list"
    :key="item"
    :title="item"
  />
</van-list>

js

export default {
  data() {
    return {
            list: [],
            loading: false, // 每次加载控制器
            finished: false, // 最终完成设置为 true
            page:1,//页码
    };
  },
methods:{
  onLoad () {
            this.$axios({
                method: 'post',
                url: ``,
                page: this.page
            }).then(res => {
                console.log(res.data)
                this.loading = false;
                if(res.data.status == 1){
                    this.page++;
                    this.list.push(...res.data.result.list);
                    if (res.data.result.list.length <= 0) {
                        this.finished = true;
                    }
                }else {

                }
            })
      }
}