通过v-infinite-scroll实现无限加载请求数据

814 阅读1分钟

vue项目中可以通过v-infinite-scroll实现无限加载请求数据。
看看我的代码:

<div
  v-infinite-scroll="loadFun"
  infinite-scroll-disabled="disabled"
>
  <no-data v-if="mediaList.length <= 0"></no-data>
  <div
  	v-else
    v-for="(item, idnex) in mediaList"
    :key="index"
  >
  	<img :src="item.src" />
  </div>
  <div v-if="mediaList.length > 0" class="materialMore">
    <p v-if="loadingOps.loading">加载中...</p>
    <p v-if="loadingOps.noMore">没有更多了</p>
  </div>
</duv>

data() {
  return {
    pagination: {
      pageSize: 9,
      pageNumber: 1,
      total: 10
    };
    loading: false,
    noMore: false,
    disabled: false,
    mediaList: [
      {
        id: "243434342342343",
        title: "图片01",
        src: "http://124.42.103.156:8089/group1/M00/13/8A/CgrQc1_8UXaAaggHAAFrBWxv3kg544.jpg"
      },
      {
        id: "7575645643453454",
        title: "图片02",
        src: "http://124.42.103.156:8089/group1/M00/13/8A/CgrQc1_8UXaAaggHAAFrBWxv3kg544.jpg"
      },
      {
        id: "4563456236475654",
        title: "图片03",
        src: "http://124.42.103.156:8089/group1/M00/13/8A/CgrQc1_8UXaAaggHAAFrBWxv3kg544.jpg"
      },
      {
        id: "4563475678567754",
        title: "图片04",
        src: "http://124.42.103.156:8089/group1/M00/13/8A/CgrQc1_8UXaAaggHAAFrBWxv3kg544.jpg"
      },
      {
        id: "65743634563463456",
        title: "图片05",
        src: "http://124.42.103.156:8089/group1/M00/13/8A/CgrQc1_8UXaAaggHAAFrBWxv3kg544.jpg"
      },
    ]
  }
}

handleLoad() {
  this.loading = true;
  this.pagination.pageNumber += 1;
  this.handleDataForm();
},

getDataList() {
  this.disabled = true; // 先置true
  //发起请求
  getList().then((res) => {
  	// 请求结束之后加载停止
    this.loading = false;
    if (res.status == 200 && res.data.code == 200) {
      let length = res.data.data.list.length;
      if (length > 0) {
        res.data.data.list.forEach(item => {
          this.mediaList.push(item);
        });
        this.noMore = false;
        this.disabled = false;
        if (length < this.pagination.pageSize) {
          // length小于每页数时不再加载
          this.noMore = true;
          this.disabled = true;
        }
      } else {
        this.noMore = true;
        this.disabled = true;
      }
    } else {
      this.noMore = true;
      this.disabled = true;
    }
  }
}