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 | 148 +++++++++++++++++++++++++++----------------------
1 files changed, 82 insertions(+), 66 deletions(-)
diff --git a/src/components/group/articleListScorll.vue b/src/components/group/articleListScorll.vue
index a2f63dd..10a9364 100644
--- a/src/components/group/articleListScorll.vue
+++ b/src/components/group/articleListScorll.vue
@@ -1,54 +1,37 @@
<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></newArticle>
- <box5 v-bind="temp"></box5>
+ <div class="mySecret" v-if="data.length==0">
+ <p>空空如也..</p>
</div>
- <div v-if="loading && !busy" class="demo-loading-container">
+
+ <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="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="pageSize" :total="total" />
+ :showLessItems="true" :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,
- "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: {
@@ -58,67 +41,100 @@
directives: {
infiniteScroll
},
+
data() {
return {
-
+ typeId: "",
data: [],
loading: false,
busy: false,
size: "small",
- total: 500,
- pageSize: 20,
+ total: 1,
+ pageSize: 6,
current: 1,
+ defaultPageSize: 10,
};
},
- beforeMount() {
- this.data = [obj1, obj2,obj3,obj2];
+ created() {
+ this.typeId = this.$route.query.typeId;
+ },
+ watch: {
+ '$route'(to, from) {
+ if ("articleList" === to.name || "home" === to.name) {
+ this.typeId = this.$route.query.typeId;
+ }
+ },
+ 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: {
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 > 3) {
- 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);
},
},
};
</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