src/components/group/articleListScorll.vue

@@ -1,14 +1,16 @@
<template>
   <div>
      <div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" :infinite-scroll-distance="10">
         <div v-for="(temp,index) in data">
            <newArticle v-bind="temp" :index="index"></newArticle>
            <!-- <box5 v-bind="temp"></box5> -->
         </div>
         <div class="mySecret" v-if="data.length==0">
            <p>空空如也..</p>
         </div>
         
         <div v-for="(temp,index) in data" >
            <newArticle v-bind="temp" :index="index"></newArticle>
            <!-- <box5 v-bind="temp"></box5> -->
         </div>


         <div v-if="loading && !busy" class="demo-loading-container">
            <a-spin />
         </div>
@@ -16,7 +18,7 @@
      <a-row type="flex" justify="center">
         <div style="position:fixed;bottom: 10px;" id="dddadf">
            <a-pagination @change="onChange" :showQuickJumper="true" :size="size" v-model="current"
               :defaultPageSize="10" :pageSize="pageSize" :total="total" />
               :defaultPageSize="defaultPageSize" :pageSize="pageSize" :total="total" />
         </div>
      </a-row>

@@ -65,6 +67,7 @@
      directives: {
         infiniteScroll
      },

      data() {
         return {
            typeId: "",
@@ -73,8 +76,9 @@
            busy: false,
            size: "small",
            total: 1,
            pageSize: 1,
            pageSize: 10,
            current: 1,
            defaultPageSize:10
         };
      },
      watch: {
@@ -87,8 +91,7 @@
            this.busy = true;
            this.$message.info('loading', 0.3);
            this.onChange(1);
         }

         },
      },
      activated() {
         window.addEventListener('scroll', this);
@@ -99,6 +102,7 @@
      beforeMount() {
         queryBlogArticleList({
            pageNo: this.current,
            pageSize:this.pageSize,
            typeId: this.typeId
         }).then((res) => {
            this.total = Number(res.data.total)
@@ -112,6 +116,7 @@
            this.current = current;
            queryBlogArticleList({
               pageNo: current,
               pageSize:this.pageSize,
               typeId: this.typeId
            }).then((res) => {
               this.busy = false;
@@ -127,6 +132,7 @@

            queryBlogArticleList({
               pageNo: this.current + 1,
               pageSize:this.pageSize,
               typeId: this.typeId
            }).then((res) => {