Vue+jquery上拉加载

Posted 2020-09-23 云阶月地 关锁千重

<ul>
      <li class="new-list" v-for="item in proarr">
        <a :href="‘/index.php/new/news?id=‘+item.id" class="new-item">
          <div class="new-title ell">{{item.title}}</div>
          <div class="new-content">
            <div class="new-cover" v-bind:style="{backgroundImage: ‘url(‘+item.purl+‘)‘}"></div>
            <div class="new-desc">{{item.introduction}}</div>
          </div>
          <div class="new-date">{{item.create_date}}</div>
        </a>
      </li>
    </ul>
  <div id="ajaxloading" v-show="showLoading" class="ac line-scale-pulse-out-rapid">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <p class="errormsg ac orange pd20">{{errmsg}}</p>

new Vue({
  el: ‘#app‘,
  data() {
    return {
      proarr: [],
      showLoading: false,
      p:1,
      errmsg:‘‘
    };
  },
  components: {
  },
  created() {
    this.getProList();
　　　　//监听滚动
      window.addEventListener(‘scroll‘, this.handleScroll);
  },
  methods: {
    handleScroll() {
　　　　//判断滚动到底部
      if ($(window).scrollTop() >=$(document).height() - $(window).height()) {
        this.showLoading = true;
        this.p++;
        this.getProList(this.p);
      }
    },
    getProList() {
      var that = this;
      $.post(‘url‘,{p:this.p},function(datas){
            var state = datas.sign;
        that.showLoading = false;
        if (state === ERROK) {
          var data = datas.data.data;
          for (var i = 0; i < data.length; i++) {
            that.proarr.push(data[i]);
          }
          that.errmsg=‘‘;
        } else {
          that.errmsg=‘暂无更多数据‘;
        }
        },‘json‘);
    }
  }
})

开始碰到个坑。请求到的数据我直接push到循环数组中，结果整个数组变成一个元素，后来想了想用循环把每一条数据分别push才解决这个问题