From a23166e4fac771238a90ae5ddc5b1e53a1c7afb8 Mon Sep 17 00:00:00 2001 From: inleft <inleft@qq.com> Date: Thu, 25 Aug 2022 18:10:21 +0800 Subject: [PATCH] 更新后的细节调整 --- src/components/group/articleListScorll.vue | 95 ++++++++++++++++------------------------------- 1 files changed, 32 insertions(+), 63 deletions(-) diff --git a/src/components/group/articleListScorll.vue b/src/components/group/articleListScorll.vue index c18502a..10a9364 100644 --- a/src/components/group/articleListScorll.vue +++ b/src/components/group/articleListScorll.vue @@ -1,18 +1,24 @@ <template> - <div> + <div class="fade"> <div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" :infinite-scroll-distance="10"> - <div v-for="temp in data"> - <newArticle v-bind="temp"></newArticle> + <div class="mySecret" v-if="data.length==0"> + <p>空空如也..</p> + </div> + + <div v-for="(temp,index) in data"> + <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;" id="dddadf"> + <div style="position:fixed;bottom: 10px;"> <a-pagination @change="onChange" :showQuickJumper="true" :size="size" v-model="current" - :defaultPageSize="10" :pageSize="pageSize" :total="total" /> + :showLessItems="true" :defaultPageSize="defaultPageSize" :pageSize="pageSize" :total="total" /> </div> </a-row> @@ -21,37 +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' - var obj1 = { - "source": babyActicle, - "title": "陈奕迅-Body Song 歌词", - "read": 1101, - "like": 233, - "folder": "歌词", - "publishTime": "2021-05-26", - } - var obj2 = { - "source": shijie, - "title": "这世界那么多人-吉他谱", - "read": 3101, - "like": 113, - "folder": "吉他谱", - "publishTime": "2020-05-26", - } - var obj3 = { - "source": shijie, - "title": "遥远的它-吉他谱", - "read": 201, - "like": 13, - "folder": "吉他谱", - "publishTime": "2022-07-26", - } export default { components: { @@ -61,6 +41,7 @@ directives: { infiniteScroll }, + data() { return { typeId: "", @@ -69,45 +50,45 @@ busy: false, size: "small", total: 1, - pageSize: 1, + pageSize: 6, current: 1, + defaultPageSize: 10, }; + }, + created() { + this.typeId = this.$route.query.typeId; }, watch: { '$route'(to, from) { - if ("articleList" === to.name) { + if ("articleList" === to.name || "home" === to.name) { this.typeId = this.$route.query.typeId; } }, typeId: function(newValue, oldValue) { - this.busy = true; - this.$message.info('loading',0.3); - this.onChange(1); - } + //有条件不刷新 + // 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); - }, - beforeMount() { - queryBlogArticleList({ - pageNo: this.current, - 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; queryBlogArticleList({ pageNo: current, + pageSize: this.pageSize, typeId: this.typeId }).then((res) => { this.busy = false; @@ -123,6 +104,7 @@ queryBlogArticleList({ pageNo: this.current + 1, + pageSize: this.pageSize, typeId: this.typeId }).then((res) => { @@ -152,20 +134,7 @@ }; </script> <style> - /* .test { - overflow: hidden; - height: 700px; - } - - .infinite-container { - overflow: auto; - } - - .infinite-container::-webkit-scrollbar { - display: none; - } */ - - .demo-loading-container { + .loading-container { position: absolute; bottom: 40px; width: 100%; -- Gitblit v1.9.1