黄良钵博客

程序开发 Vue制作下拉刷新和数据对接

这里使用的Vue的方式是<script src="Vue.min.js"></script>直接引入的。 <div>     <ul>         <!-- 把allArr数组遍历到item中，v-for循环 -->         <li v-for="item in allArr" :key="item.id">{{item.name}}<img :src="item.imgSrc" \></li>     </ul> </div> <script>   new Vue({       el: '#app',       data() {         return {           allArr: [], // 需要遍历的数组           p:1, // 页数           resLength:'10', //获取多少条数据，用于判断是否继续请求下一页         };       },       created() {         this.getProList(); // 第一次调用加载首页     　　　　//监听滚动           window.addEventListener('scroll', this.handleScroll);       },       methods: {         handleScroll() {     　　　　//判断滚动到底部                 // 这里的id是容器的id           if ($(window).scrollTop() >=$('#tab1').height() - $(window).height()) {             if (this.resLength == 10) { // 判断接受的数据是否等于10条等于的话继续请求数据               this.p++; // 设置页数加1               this.getProList(this.p); //执行ajax请求，把页数传入             }           }         },         // 全部请求         getProList() {           var that = this;           $.ajax({               url:"/index.php", // 请求地址               type:'POST', //请求类型 POST或GET               async:true,    //或false,是否异步               data:{                   page : this.p, // 发送页数到后台                   pagesize:10   // 发送每页获取条数                 // 以上两条根据后台需求修改               },               timeout:5000,    //超时时间               dataType:'json',    //返回的数据格式：json/xml/html/script/jsonp/text               beforeSend:function(xhr){                   // console.log('发送前')               },               success:function(res){                   // console.log(res)                   console.log('请求成功回调')                   if (res.status == 1) {                     let data = res.res;                     // 设置每次获取条数                     that.resLength = data.length;                     // 上拉加载 把获取到的每一项数据push进数组中                     for (var i = 0; i < data.length; i++) {                       that.allArr.push(data[i]);                     };                   }                   else{                     console.log(data.message);                   }                 },               error:function(xhr,textStatus){                   // console.log('错误')               },               complete:function(){                   // console.log('结束')               }           })         }       }     }) </script>