inleft
2022-08-10 10572998aa54d61c45df3e334eb01e44a15df729
commit | author | age
aab811 1 <template>
I 2     <div>
3         <div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" :infinite-scroll-distance="10">
81c155 4             <div class="mySecret" v-if="data.length==0">
I 5                 <p>空空如也..</p>
6             </div>
74344a 7
I 8             <div v-for="(temp,index) in data">
f60b31 9                 <newArticle v-bind="temp" :index="index"></newArticle>
I 10                 <!-- <box5 v-bind="temp"></box5> -->
11             </div>
12
13
aab811 14             <div v-if="loading && !busy" class="demo-loading-container">
I 15                 <a-spin />
16             </div>
17         </div>
019990 18         <a-row type="flex" justify="center">
74344a 19             <div style="position:fixed;bottom: 10px;">
019990 20                 <a-pagination @change="onChange" :showQuickJumper="true" :size="size" v-model="current"
f60b31 21                     :defaultPageSize="defaultPageSize" :pageSize="pageSize" :total="total" />
019990 22             </div>
I 23         </a-row>
63af45 24
aab811 25     </div>
I 26 </template>
27 <script>
28     import infiniteScroll from 'vue-infinite-scroll';
29     import box5 from "../mini/box5-article.vue"
30     import babyActicle from '../../assets/baby.htm'
06ee76 31     import newArticle from "../mini/box-new-article.vue"
aab811 32     import shijie from '../../assets/shijie.htm'
63af45 33     import {
I 34         queryBlogArticleList
35     } from '../../api/blogArticle.js'
aab811 36
3a5d66 37
I 38
aab811 39     export default {
I 40         components: {
06ee76 41             box5,
L 42             newArticle
aab811 43         },
I 44         directives: {
45             infiniteScroll
46         },
f60b31 47
aab811 48         data() {
I 49             return {
4b854c 50                 typeId: "",
aab811 51                 data: [],
I 52                 loading: false,
53                 busy: false,
54                 size: "small",
63af45 55                 total: 1,
a71b64 56                 pageSize: 6,
aab811 57                 current: 1,
74344a 58                 defaultPageSize: 10
aab811 59             };
74344a 60         },
I 61         created() {
62             this.typeId = this.$route.query.typeId;
aab811 63         },
4b854c 64         watch: {
I 65             '$route'(to, from) {
74344a 66                 if ("articleList" === to.name || "home" === to.name) {
4b854c 67                     this.typeId = this.$route.query.typeId;
I 68                 }
69             },
70             typeId: function(newValue, oldValue) {
71                 this.busy = true;
81c155 72                 this.$message.info('loading', 0.3);
105729 73                 
I 74                 //有条件不刷新
75                 if (newValue == undefined && oldValue != "") {
76                     return
77                 }
78
4b854c 79                 this.onChange(1);
f60b31 80             },
4b854c 81         },
I 82         activated() {
83             window.addEventListener('scroll', this);
84         },
85         deactivated() {
86             window.removeEventListener('scroll', this);
87         },
aab811 88         methods: {
I 89             onChange(current) {
90                 this.current = current;
63af45 91                 queryBlogArticleList({
4b854c 92                     pageNo: current,
74344a 93                     pageSize: this.pageSize,
4b854c 94                     typeId: this.typeId
63af45 95                 }).then((res) => {
I 96                     this.busy = false;
97                     this.total = Number(res.data.total)
98                     this.pageSize = Number(res.data.size);
99                     this.data = res.data.records;
100                     return res
101                 })
aab811 102             },
I 103             loadMore() {
104                 this.loading = true;
63af45 105                 this.busy = true;
4b854c 106
63af45 107                 queryBlogArticleList({
4b854c 108                     pageNo: this.current + 1,
74344a 109                     pageSize: this.pageSize,
4b854c 110                     typeId: this.typeId
63af45 111                 }).then((res) => {
aab811 112
63af45 113                     this.total = Number(res.data.total)
I 114                     this.pageSize = Number(res.data.size);
115                     this.data = this.data.concat(res.data.records);
116                     this.busy = false;
117                     if (res.data.records.length == 0) {
4b854c 118                         //this.$message.warning('别滑了,别滑了,到底了..');
63af45 119                         this.busy = true;
I 120                         this.loading = false;
121                         return;
122                     } else {
123                         this.current += 1;
124                     }
aab811 125
63af45 126                     return res
I 127                 })
aab811 128
I 129                 setTimeout(function() {
130                     this.loading = false;
63af45 131                 }, 100);
aab811 132
I 133
134             },
135         },
136     };
137 </script>
138 <style>
139     .demo-loading-container {
140         position: absolute;
141         bottom: 40px;
142         width: 100%;
143         text-align: center;
144     }
145 </style>