滚动加载

1、安装vue-infinite-scroll

    npm i vue-infinite-scroll -D

2、页面引用

// 滚动加载插件

import infiniteScroll from 'vue-infinite-scroll';

export default {

directives: { infiniteScroll },

data() {

    return {

      lowerList: [], // 下级报表

      busy: false, // 是否滚动加载

      req: {

        page: 0, // 分页

        pageSize: 10, // 条数

      }

    };

  },

}，

methods: {

// 获取下级列表

    getData() {

      this.busy = true;

      this.req.page = ++this.req.page;

      lowerReport(this.req).then(response => {

        this.busy = false;

        this.lowerList = this.lowerList.concat(response.data);

        // response 空时候不请求

        if (!(0 in response)) {

          this.busy = true;

        }

      });

    },

    // 滚动加载

    pullup() {

      if (!this.busy) {

        this.getData();

      }

    },

}

页面引用

<div class="scroller" v-infinite-scroll="pullup" infinite-scroll-disabled="busy" infinite-scroll-distance="10">

<-- 需要滚动加载的内容 -->

</div>