下拉加载代码

<template>
    <section class="list" id="src">
      <div class="title"><h3>专属SRC</h3><span>厂商发布悬赏，感谢白帽子参与安全保障计划</span></div>
      <div class="card">
        <card v-for="(list,index) in cardList" :key="index" :boxStyle="boxStyle" :paddingStyle="{padding:'0px'}">

          <img v-if="list.logo && list.logo != null && list.logo != ''" :src="list.logo|base64" class="img" @click="routerPush('srcDetails',{companyId:list.companyId})">
          <img v-else src="../../../../static/images/defaultCompany.png" class="img" @click="routerPush('srcDetails',{companyId:list.companyId})">
          <h3 :title="list.companyName">{{list.companyName}}</h3>
          <span>{{list.description}}</span>
          <el-button :disabled="list.warning" :class="['button',{'isDisabled':list.warning}]" @click="routerPush('submit',{companyId:list.companyId,activityId:list.activityId,companyName:list.companyName,flag:'专属SRC'})">提交漏洞</el-button>
        </card>
      </div>
      <div class="manualLoading" v-if="busy"><i v-if="massage === '正在加载'" class="el-icon-loading"></i>{{massage}}</div>
    </section>
</template>
<style lang="scss" scoped>
    .manualLoading {
      text-align: center;
      height: 30px;
      line-height: 30px;
      font-family: PingFangSC-Regular;
      font-size: 16px;
      color: #9C9C9C;
      margin-bottom: 30px;
      i {
          margin-right: 8px;
        }
    }

 
</style>
<script>

export default {

  data() {
    return {
      
      pageData: {
        currentPage: 1,
        pageSize: 12
      },
      total: 0,
      busy: false,
      descName: "createTime",
      flag: '',
      massage: "正在加载",
      cardList: [],
  },
  components: {
    Card,
    paFooter
  },
  created() {
    this.flag = this.des
     this.getListData(this.queryData())
    const _this = this;
    window.onscroll = function() {
      if (
        document.getElementById("src") &&
        _this.scroll() + document.body.offsetHeight >
          document.getElementById("src").offsetHeight &&
        !_this.busy
      ) {
        _this.getListData(_this.queryData());
      }
    };
  },

  methods: {

    queryData() {
      const descName = this.descName;
      const query = {
        page: this.pageData.currentPage,
        rows: this.pageData.pageSize,
        descName: this.descName
      };
      return query;
    },

    getListData(query) {
       console.log(query)
      if (this.busy && query.page !== 1) return;
      this.busy = true;
      this.massage = "正在加载";
      this.api
        .get("activity/srcActivityList", {
          ...query
        })
        .then(res => {
          if (res.data.data.rows.length > 0) {
            // console.log(query.page)
            if(query.page === 1) {
              this.cardList = res.data.data.rows;
            } else {
              const item = res.data.data.rows;
              this.cardList = [...this.cardList, ...item];
            }
            // console.log(this.cardList)
            this.total = res.data.data.total;
            // console.log(this.total)
            this.busy = false;
            this.pageData.currentPage += 1;
            this.footerShow = true;
            if ( this.pageData.currentPage > Math.ceil(this.total / this.pageData.pageSize)) {
              this.busy = true;
              this.massage = "没有更多了";
            }
          } else {
            this.busy = true;
          }
        });
    },
    // 页面被卷去的高度的兼容性封装
    scroll() {
      return (
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop ||
        0
      );
    }
  }
};
</script>