src/components/group/articleListScorll.vue

@@ -1,27 +1,38 @@
<template>
   <div>
      <div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" :infinite-scroll-distance="10">
         <div v-for="temp in data">
            <box5 v-bind="temp"></box5>
         <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>
      </div>
      <div style="position:fixed;bottom: 10px;" id="dddadf">
         <a-pagination @change="onChange" :showQuickJumper="true" :size="size" v-model="current"
            :defaultPageSize="pageSize" :total="total" />
      </div>
      <a-back-top>
         <a-icon type="up" />回到顶部
      </a-back-top>
      <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="defaultPageSize" :pageSize="pageSize" :total="total" />
         </div>
      </a-row>

   </div>
</template>
<script>
   import infiniteScroll from 'vue-infinite-scroll';
   import box5 from "../mini/box5-article.vue"
   import babyActicle from '../../assets/baby.htm'
   import newArticle from "../mini/box-new-article.vue"
   import shijie from '../../assets/shijie.htm'
   import {
      queryBlogArticleList
   } from '../../api/blogArticle.js'

   var obj1 = {
      "source": babyActicle,
@@ -50,52 +61,101 @@

   export default {
      components: {
         box5
         box5,
         newArticle
      },
      directives: {
         infiniteScroll
      },

      data() {
         return {

            typeId: "",
            data: [],
            loading: false,
            busy: false,
            size: "small",
            total: 500,
            pageSize: 20,
            total: 1,
            pageSize: 10,
            current: 1,
            defaultPageSize:10
         };
      },
      watch: {
         '$route'(to, from) {
            if ("articleList" === to.name) {
               this.typeId = this.$route.query.typeId;
            }
         },
         typeId: function(newValue, oldValue) {
            this.busy = true;
            this.$message.info('loading', 0.3);
            this.onChange(1);
         },
      },
      activated() {
         window.addEventListener('scroll', this);
      },
      deactivated() {
         window.removeEventListener('scroll', this);
      },
      beforeMount() {
         this.data = [obj1, obj2,obj3];
         queryBlogArticleList({
            pageNo: this.current,
            pageSize:this.pageSize,
            typeId: this.typeId
         }).then((res) => {
            this.total = Number(res.data.total)
            this.pageSize = Number(res.data.size);
            this.data = res.data.records;
            return res
         })
      },
      methods: {
         onChange(current) {
            this.current = current;
            this.data = [obj2, obj3, obj1, obj2];
            queryBlogArticleList({
               pageNo: current,
               pageSize:this.pageSize,
               typeId: this.typeId
            }).then((res) => {
               this.busy = false;
               this.total = Number(res.data.total)
               this.pageSize = Number(res.data.size);
               this.data = res.data.records;
               return res
            })
         },
         loadMore() {
            const data = this.data;
            this.loading = true;
            this.busy = true;

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

            if (data.length > 15) {
               this.$message.warning('没有更多了');
               this.busy = true;
               this.loading = false;
               return;
            }
               this.total = Number(res.data.total)
               this.pageSize = Number(res.data.size);
               this.data = this.data.concat(res.data.records);
               this.busy = false;
               if (res.data.records.length == 0) {
                  //this.$message.warning('别滑了,别滑了,到底了..');
                  this.busy = true;
                  this.loading = false;
                  return;
               } else {
                  this.current += 1;
               }

               return res
            })

            setTimeout(function() {
               this.loading = false;
            }, 1000);
            }, 100);

            this.data = data.concat(obj1, obj3, obj2, obj3, obj1);

         },
      },