这里使用的Vue的方式是<script src="Vue.min.js"></script>直接引入的。

1. <div>
2.     <ul>
3.         <!-- 把allArr数组遍历到item中，v-for循环 -->
4.         <li v-for="item in allArr" :key="item.id">{{item.name}}<img :src="item.imgSrc" \></li>
5.     </ul>
6. </div>

1. <script>
2.   new Vue({
3.       el: '#app',
4.       data() {
5.         return {
6.           allArr: [], // 需要遍历的数组
7.           p:1, // 页数
8.           resLength:'10', //获取多少条数据，用于判断是否继续请求下一页
9.         };
10.       },
11.       created() {
12.
13.         this.getProList(); // 第一次调用加载首页
14.     　　　　//监听滚动
15.           window.addEventListener('scroll', this.handleScroll);
16.       },
17.       methods: {
18.         handleScroll() {
19.     　　　　//判断滚动到底部
20.                 // 这里的id是容器的id
21.           if ($(window).scrollTop() >=$('#tab1').height() - $(window).height()) {
22.             if (this.resLength == 10) { // 判断接受的数据是否等于10条等于的话继续请求数据
23.               this.p++; // 设置页数加1
24.               this.getProList(this.p); //执行ajax请求，把页数传入
25.             }
26.           }
27.
28.         },
29.
30.         // 全部请求
31.         getProList() {
32.           var that = this;
33.           $.ajax({
34.               url:"/index.php", // 请求地址
35.               type:'POST', //请求类型 POST或GET
36.               async:true,    //或false,是否异步
37.               data:{
38.                   page : this.p, // 发送页数到后台
39.                   pagesize:10   // 发送每页获取条数
40.                 // 以上两条根据后台需求修改
41.               },
42.               timeout:5000,    //超时时间
43.               dataType:'json',    //返回的数据格式：json/xml/html/script/jsonp/text
44.               beforeSend:function(xhr){
45.                   // console.log('发送前')
46.               },
47.               success:function(res){
48.                   // console.log(res)
49.                   console.log('请求成功回调')
50.                   if (res.status == 1) {
51.
52.                     let data = res.res;
53.
54.                     // 设置每次获取条数
55.                     that.resLength = data.length;
56.
57.                     // 上拉加载 把获取到的每一项数据push进数组中
58.                     for (var i = 0; i < data.length; i++) {
59.                       that.allArr.push(data[i]);
60.                     };
61.
62.                   }
63.                   else{
64.                     console.log(data.message);
65.                   }
66.
67.                 },
68.               error:function(xhr,textStatus){
69.                   // console.log('错误')
70.               },
71.               complete:function(){
72.                   // console.log('结束')
73.               }
74.           })
75.         }
76.       }
77.     })
78. </script>