npm install vue-infinite-scroll --save

尽管官方也推荐了几种载入方式，但“最vue”的方式肯定是在main.js中加入：

import infiniteScroll from 'vue-infinite-scroll'
Vue.use(infiniteScroll)

HTML模板代码：

<template>
  <div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
    <div v-for="item in data" :key="item.index">{{item.name}}</div>
  </div>
</template>

JS代码：

 data () {
    return {
      count: 0,
      data: [],
      busy: false
    }
  }

  methods: {
    loadMore: function() {
      this.busy = true
      setTimeout(() => {
        for (var i = 0, j = 10; i < j; i++) {
          this.data.push({name: this.count++ })
        }
        console.log(this.data)
        this.busy = false
      }, 1000)
    }
  }

AJAX请求

  methods: {

  getGoodsInfo(pag) {
       var postUrl = 'http://demo.site.com/post';
 axios({
     headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},//设置跨域请求头
    method: "POST",//请求方式
      url: postUrl,//请求地址 
      data: {
 "page":pag,
"limit":20//请求参数

      }
    })
      .then(function(response) {
        //返回值
   var res = JSON.stringify(response);
        console.log(response.data);
      })
      .catch(function(err) {
        console.log(err);
      });
  }


  }

注：异步请求返回值，一定要使用返回对象的data属性：

function(res){ 
  console.log(res.data)
}

<template>
  <div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
    <div v-for="item in data" :key="item.index">{{item.name}}</div>
  </div>
</template>

<script>
import Vue from 'vue';
import { List } from 'vant';
import axios from 'axios';
import infiniteScroll from 'vue-infinite-scroll';
import cors from 'cors';
Vue.use(infiniteScroll);
Vue.use(cors);
export default {

  components: {
    [List.name]: List
    ,[axios.name]: axios
  },

data () {
    return {
      count: 0,
      data: [],
      busy: false
    }
  },


  methods: {

  getGoodsInfo(pag) {
       var postUrl = 'http://api.mysite.com/get-goods-info';

 axios({
     headers: {
'Content-Type': 'application/x-www-form-urlencoded'

},
    method: "POST",//请求方式
      url: postUrl,//请求地址 
      data: {
 "page":pag,
"limit":20//请求参数

      }
    })
      .then(function(response) {
        //返回值
        console.log(response);
        return response.data;

      })
      .catch(function(err) {
        console.log(err);
      });

  },

    loadMore() {
      this.busy = true
      setTimeout(() => {
        for (var i = 0, j = 10; i < j; i++) {
          this.data.push({name: this.count++ })
        }
        console.log(this.data)
        this.busy = false
      }, 1000)

      this.getGoodsInfo(1);

    }

  }


}

</script>

vue 发送ajax请求 https://www.cnblogs.com/xuanan/p/7847233.html
vue-infinite-scroll使用笔记 https://www.jianshu.com/p/c4abab8c1ba6
vue axios跨域 Request Method: OPTIONS问题 https://blog.csdn.net/Homer_Simpson/article/details/89188068
不要再问我跨域的问题了 https://segmentfault.com/a/1190000015597029?utm_source=tag-newest
VUE CLI 创建一个项目 https://cli.vuejs.org/zh/guide/creating-a-project.html