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

BG7ZAG

分类： 程序开发 1197 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() {
  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.           }
  28.         },
  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) {
  52.                     let data = res.res;
  54.                     // 设置每次获取条数
  55.                     that.resLength = data.length;
  57.                     // 上拉加载 把获取到的每一项数据push进数组中
  58.                     for (var i = 0; i < data.length; i++) {
  59.                       that.allArr.push(data[i]);
  60.                     };
  62.                   }
  63.                   else{
  64.                     console.log(data.message);
  65.                   }
  67.                 },
  68.               error:function(xhr,textStatus){
  69.                   // console.log('错误')
  70.               },
  71.               complete:function(){
  72.                   // console.log('结束')
  73.               }
  74.           })
  75.         }
  76.       }
  77.     })
  78. </script>

版权声明: 本站文章除特别声明外，均为本站原创。转载请注明出处，谢谢。

本文地址: https://blog.bg7zag.com/1305

  • 0人 Love
  • 0人 Haha
  • 0人 Wow
  • 0人 Sad
  • 0人 Angry
Vue、上拉加载、数据对接

作者简介： BG7ZAG

打赏

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

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

Loading...