Vue制作下拉刷新和数据对接

黄良钵

分类: 程序开发 0 2

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

作者简介:黄良钵

打赏

博客站长,前端开发工程师

共 2 条评论关于 “Vue制作下拉刷新和数据对接”

Loading...