vue滚动加载网络请求

Vue可以使用`vue-infinite-loading`插件来实现滚动加载网络请求。

首先，安装插件：

npm install vue-infinite-loading --save

然后，在需要使用滚动加载的组件中，引入插件并注册：

<template>
  <div>
    <ul>
      <li v-for="(item, index) in list" :key="index">{{ item }}</li>
    </ul>
    <infinite-loading @infinite="infiniteHandler" spinner="circles"></infinite-loading>
  </div>
</template>

<script>
import InfiniteLoading from 'vue-infinite-loading';

export default {
  name: 'MyComponent',
  components: {
    InfiniteLoading
  },
  data() {
    return {
      page: 1,
      pageSize: 10,
      list: []
    };
  },
  methods: {
    infiniteHandler($state) {
      // 发送网络请求
      axios.get(`/api/list?page=${this.page}&pageSize=${this.pageSize}`).then(res => {
        if (res.data.length) {
          this.list = [...this.list, ...res.data];
          this.page++;
          $state.loaded();
        } else {
          $state.complete();
        }
      }).catch(() => $state.error());
    },
  }
}
</script>

这里使用了`vue-infinite-loading`的`infinite`事件来监听滚动事件，然后在事件处理函数中发送网络请求，获取数据并更新页面。

当页面滚动到底部时，会触发`infinite`事件，然后在事件处理函数中判断是否还有更多数据，如果有，则更新`list`，并通过`$state.loaded()`告诉插件已经加载完成；如果没有更多数据，则通过`$state.complete()`告诉插件已经全部加载完成；如果出现错误，则通过`$state.error()`告诉插件出现错误。

注意，这里的网络请求使用了axios库，需要先安装并引入axios库。同时，还需要根据实际情况修改请求参数和响应数据的处理方式。