inleft
2022-03-04 ec6f207325f1996d71fb4e0c6acada906ec026bd
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
I 37     export default {
38         components: {
06ee76 39             box5,
L 40             newArticle
aab811 41         },
I 42         directives: {
43             infiniteScroll
44         },
f60b31 45
aab811 46         data() {
I 47             return {
4b854c 48                 typeId: "",
aab811 49                 data: [],
I 50                 loading: false,
51                 busy: false,
52                 size: "small",
63af45 53                 total: 1,
a71b64 54                 pageSize: 6,
aab811 55                 current: 1,
74344a 56                 defaultPageSize: 10
aab811 57             };
74344a 58         },
I 59         created() {
60             this.typeId = this.$route.query.typeId;
aab811 61         },
4b854c 62         watch: {
I 63             '$route'(to, from) {
74344a 64                 if ("articleList" === to.name || "home" === to.name) {
4b854c 65                     this.typeId = this.$route.query.typeId;
I 66                 }
67             },
68             typeId: function(newValue, oldValue) {
69                 this.busy = true;
81c155 70                 this.$message.info('loading', 0.3);
4b854c 71                 this.onChange(1);
f60b31 72             },
4b854c 73         },
I 74         activated() {
75             window.addEventListener('scroll', this);
76         },
77         deactivated() {
78             window.removeEventListener('scroll', this);
79         },
aab811 80         methods: {
I 81             onChange(current) {
82                 this.current = current;
63af45 83                 queryBlogArticleList({
4b854c 84                     pageNo: current,
74344a 85                     pageSize: this.pageSize,
4b854c 86                     typeId: this.typeId
63af45 87                 }).then((res) => {
I 88                     this.busy = false;
89                     this.total = Number(res.data.total)
90                     this.pageSize = Number(res.data.size);
91                     this.data = res.data.records;
92                     return res
93                 })
aab811 94             },
I 95             loadMore() {
96                 this.loading = true;
63af45 97                 this.busy = true;
4b854c 98
63af45 99                 queryBlogArticleList({
4b854c 100                     pageNo: this.current + 1,
74344a 101                     pageSize: this.pageSize,
4b854c 102                     typeId: this.typeId
63af45 103                 }).then((res) => {
aab811 104
63af45 105                     this.total = Number(res.data.total)
I 106                     this.pageSize = Number(res.data.size);
107                     this.data = this.data.concat(res.data.records);
108                     this.busy = false;
109                     if (res.data.records.length == 0) {
4b854c 110                         //this.$message.warning('别滑了,别滑了,到底了..');
63af45 111                         this.busy = true;
I 112                         this.loading = false;
113                         return;
114                     } else {
115                         this.current += 1;
116                     }
aab811 117
63af45 118                     return res
I 119                 })
aab811 120
I 121                 setTimeout(function() {
122                     this.loading = false;
63af45 123                 }, 100);
aab811 124
I 125
126             },
127         },
128     };
129 </script>
130 <style>
131     .demo-loading-container {
132         position: absolute;
133         bottom: 40px;
134         width: 100%;
135         text-align: center;
136     }
137 </style>