From c3aa826406d52957d6f98d0ecd4b77413d5ce908 Mon Sep 17 00:00:00 2001 From: inleft <inleft@qq.com> Date: Mon, 29 Aug 2022 18:23:08 +0800 Subject: [PATCH] 统计模块异步加载 --- src/components/group/articleListScorll.vue | 22 ++++++++++++++-------- 1 files changed, 14 insertions(+), 8 deletions(-) diff --git a/src/components/group/articleListScorll.vue b/src/components/group/articleListScorll.vue index b59c978..10a9364 100644 --- a/src/components/group/articleListScorll.vue +++ b/src/components/group/articleListScorll.vue @@ -1,24 +1,24 @@ <template> - <div> + <div class="fade"> <div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" :infinite-scroll-distance="10"> <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> + <newArticle v-bind="temp" :index="index" :typeId="typeId"></newArticle> <!-- <box5 v-bind="temp"></box5> --> </div> - <div v-if="loading && !busy" class="demo-loading-container"> + <div v-if="loading && !busy" class="loading-container"> <a-spin /> </div> </div> <a-row type="flex" justify="center"> <div style="position:fixed;bottom: 10px;"> <a-pagination @change="onChange" :showQuickJumper="true" :size="size" v-model="current" - :defaultPageSize="defaultPageSize" :pageSize="pageSize" :total="total" /> + :showLessItems="true" :defaultPageSize="defaultPageSize" :pageSize="pageSize" :total="total" /> </div> </a-row> @@ -27,12 +27,11 @@ <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' + export default { components: { @@ -53,7 +52,7 @@ total: 1, pageSize: 6, current: 1, - defaultPageSize: 10 + defaultPageSize: 10, }; }, created() { @@ -66,15 +65,22 @@ } }, typeId: function(newValue, oldValue) { + //有条件不刷新 + // if (newValue == undefined || oldValue == "") { + // return + // } + this.busy = true; this.$message.info('loading', 0.3); this.onChange(1); }, }, activated() { + this.busy = false; window.addEventListener('scroll', this); }, deactivated() { + this.busy = true; window.removeEventListener('scroll', this); }, methods: { @@ -128,7 +134,7 @@ }; </script> <style> - .demo-loading-container { + .loading-container { position: absolute; bottom: 40px; width: 100%; -- Gitblit v1.9.1