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