inleft
2022-02-22 c23efbe2832d1a9eecd4ef5d20d984661b24dd22
commit | author | age
aab811 1 <template>
I 2     <div>
3         <div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" :infinite-scroll-distance="10">
c23efb 4             <div v-for="(temp,index) in data">
I 5                 <newArticle v-bind="temp" :index="index"></newArticle>
63af45 6                 <!-- <box5 v-bind="temp"></box5> -->
aab811 7             </div>
I 8             <div v-if="loading && !busy" class="demo-loading-container">
9                 <a-spin />
10             </div>
11         </div>
019990 12         <a-row type="flex" justify="center">
I 13             <div style="position:fixed;bottom: 10px;" id="dddadf">
14                 <a-pagination @change="onChange" :showQuickJumper="true" :size="size" v-model="current"
63af45 15                     :defaultPageSize="10" :pageSize="pageSize" :total="total" />
019990 16             </div>
I 17         </a-row>
63af45 18
aab811 19     </div>
I 20 </template>
21 <script>
22     import infiniteScroll from 'vue-infinite-scroll';
23     import box5 from "../mini/box5-article.vue"
24     import babyActicle from '../../assets/baby.htm'
06ee76 25     import newArticle from "../mini/box-new-article.vue"
aab811 26     import shijie from '../../assets/shijie.htm'
63af45 27     import {
I 28         queryBlogArticleList
29     } from '../../api/blogArticle.js'
aab811 30
I 31     var obj1 = {
32         "source": babyActicle,
33         "title": "陈奕迅-Body Song 歌词",
34         "read": 1101,
35         "like": 233,
36         "folder": "歌词",
37         "publishTime": "2021-05-26",
38     }
39     var obj2 = {
40         "source": shijie,
41         "title": "这世界那么多人-吉他谱",
42         "read": 3101,
43         "like": 113,
44         "folder": "吉他谱",
45         "publishTime": "2020-05-26",
46     }
47     var obj3 = {
48         "source": shijie,
49         "title": "遥远的它-吉他谱",
50         "read": 201,
51         "like": 13,
52         "folder": "吉他谱",
53         "publishTime": "2022-07-26",
54     }
55
56     export default {
57         components: {
06ee76 58             box5,
L 59             newArticle
aab811 60         },
I 61         directives: {
62             infiniteScroll
63         },
64         data() {
65             return {
4b854c 66                 typeId: "",
aab811 67                 data: [],
I 68                 loading: false,
69                 busy: false,
70                 size: "small",
63af45 71                 total: 1,
I 72                 pageSize: 1,
aab811 73                 current: 1,
I 74             };
75         },
4b854c 76         watch: {
I 77             '$route'(to, from) {
78                 if ("articleList" === to.name) {
79                     this.typeId = this.$route.query.typeId;
80                 }
81             },
82             typeId: function(newValue, oldValue) {
83                 this.busy = true;
84                 this.$message.info('loading',0.3);
85                 this.onChange(1);
86             }
87
88         },
89         activated() {
90             window.addEventListener('scroll', this);
91         },
92         deactivated() {
93             window.removeEventListener('scroll', this);
94         },
aab811 95         beforeMount() {
63af45 96             queryBlogArticleList({
4b854c 97                 pageNo: this.current,
I 98                 typeId: this.typeId
63af45 99             }).then((res) => {
I 100                 this.total = Number(res.data.total)
101                 this.pageSize = Number(res.data.size);
102                 this.data = res.data.records;
103                 return res
104             })
aab811 105         },
I 106         methods: {
107             onChange(current) {
108                 this.current = current;
63af45 109                 queryBlogArticleList({
4b854c 110                     pageNo: current,
I 111                     typeId: this.typeId
63af45 112                 }).then((res) => {
I 113                     this.busy = false;
114                     this.total = Number(res.data.total)
115                     this.pageSize = Number(res.data.size);
116                     this.data = res.data.records;
117                     return res
118                 })
aab811 119             },
I 120             loadMore() {
121                 this.loading = true;
63af45 122                 this.busy = true;
4b854c 123
63af45 124                 queryBlogArticleList({
4b854c 125                     pageNo: this.current + 1,
I 126                     typeId: this.typeId
63af45 127                 }).then((res) => {
aab811 128
63af45 129                     this.total = Number(res.data.total)
I 130                     this.pageSize = Number(res.data.size);
131                     this.data = this.data.concat(res.data.records);
132                     this.busy = false;
133                     if (res.data.records.length == 0) {
4b854c 134                         //this.$message.warning('别滑了,别滑了,到底了..');
63af45 135                         this.busy = true;
I 136                         this.loading = false;
137                         return;
138                     } else {
139                         this.current += 1;
140                     }
aab811 141
63af45 142                     return res
I 143                 })
aab811 144
I 145                 setTimeout(function() {
146                     this.loading = false;
63af45 147                 }, 100);
aab811 148
I 149
150             },
151         },
152     };
153 </script>
154 <style>
155     /* .test {
156         overflow: hidden;
157         height: 700px;
158     }
159
160     .infinite-container {
161         overflow: auto;
162     }
163
164     .infinite-container::-webkit-scrollbar {
165         display: none;
166     } */
167
168     .demo-loading-container {
169         position: absolute;
170         bottom: 40px;
171         width: 100%;
172         text-align: center;
173     }
174 </style>