From 63af45eaa849552e4ea3ff0248c47bacb62cacdb Mon Sep 17 00:00:00 2001
From: inleft <inleft@qq.com>
Date: Wed, 16 Feb 2022 18:28:19 +0800
Subject: [PATCH] 对接接口
---
src/components/group/articleListScorll.vue | 82 +++++++++++++++++++++++++++-------------
1 files changed, 55 insertions(+), 27 deletions(-)
diff --git a/src/components/group/articleListScorll.vue b/src/components/group/articleListScorll.vue
index 06d363b..9de3547 100644
--- a/src/components/group/articleListScorll.vue
+++ b/src/components/group/articleListScorll.vue
@@ -2,26 +2,31 @@
<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 />
</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="10" :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 +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];
+ 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