From 28d46dfc072a13859a5c0bc4901645b77022c7c3 Mon Sep 17 00:00:00 2001 From: inleft <inleft@qq.com> Date: Sun, 20 Feb 2022 01:25:51 +0800 Subject: [PATCH] 文章主体添加密码授权逻辑 --- src/components/group/articleListScorll.vue | 74 +++++++++++++++++++++++++------------ 1 files changed, 50 insertions(+), 24 deletions(-) diff --git a/src/components/group/articleListScorll.vue b/src/components/group/articleListScorll.vue index d8e2c19..6d83f3d 100644 --- a/src/components/group/articleListScorll.vue +++ b/src/components/group/articleListScorll.vue @@ -2,7 +2,8 @@ <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> + <newArticle v-bind="temp"></newArticle> + <!-- <box5 v-bind="temp"></box5> --> </div> <div v-if="loading && !busy" class="demo-loading-container"> <a-spin /> @@ -11,19 +12,21 @@ <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="pageSize" :total="total" /> + :defaultPageSize="10" :pageSize="pageSize" :total="total" /> </div> </a-row> - <a-back-top> - <a-icon type="up" />回到顶部 - </a-back-top> + </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, @@ -52,52 +55,75 @@ export default { components: { - box5 + box5, + newArticle }, directives: { infiniteScroll }, data() { return { - data: [], loading: false, busy: false, size: "small", - total: 500, - pageSize: 20, + total: 1, + pageSize: 1, current: 1, }; }, beforeMount() { - this.data = [obj1, obj2,obj3,obj2]; + queryBlogArticleList({ + pageNo: this.current + }).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: this.current + }).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; + + queryBlogArticleList({ + pageNo: this.current + 1 + }).then((res) => { - this.current += 1; - console.log(this.current); - console.log(this.busy); + 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; + } - if (data.length > 15) { - this.$message.warning('没有更多了'); - this.busy = true; - this.loading = false; - return; - } - + return res + }) setTimeout(function() { this.loading = false; - }, 1000); + }, 100); - this.data = data.concat(obj1, obj3, obj2, obj3, obj1); }, }, -- Gitblit v1.9.1