inleft
2022-02-20 28d46dfc072a13859a5c0bc4901645b77022c7c3
commit | author | age
aab811 1 <template>
I 2     <div>
3         <div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" :infinite-scroll-distance="10">
4             <div v-for="temp in data">
63af45 5                 <newArticle v-bind="temp"></newArticle>
I 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 {
66                 data: [],
67                 loading: false,
68                 busy: false,
69                 size: "small",
63af45 70                 total: 1,
I 71                 pageSize: 1,
aab811 72                 current: 1,
I 73             };
74         },
75         beforeMount() {
63af45 76             queryBlogArticleList({
I 77                 pageNo: this.current
78             }).then((res) => {
79                 this.total = Number(res.data.total)
80                 this.pageSize = Number(res.data.size);
81                 this.data = res.data.records;
82                 return res
83             })
aab811 84         },
I 85         methods: {
63af45 86
aab811 87             onChange(current) {
I 88                 this.current = current;
63af45 89                 queryBlogArticleList({
I 90                     pageNo: this.current
91                 }).then((res) => {
92                     this.busy = false;
93                     this.total = Number(res.data.total)
94                     this.pageSize = Number(res.data.size);
95                     this.data = res.data.records;
96                     return res
97                 })
aab811 98             },
I 99             loadMore() {
100                 this.loading = true;
63af45 101                 this.busy = true;
I 102                 
103                 queryBlogArticleList({
104                     pageNo: this.current + 1
105                 }).then((res) => {
aab811 106
63af45 107                     this.total = Number(res.data.total)
I 108                     this.pageSize = Number(res.data.size);
109                     this.data = this.data.concat(res.data.records);
110                     this.busy = false;
111                     if (res.data.records.length == 0) {
6bcd13 112                         this.$message.warning('别滑了,别滑了,到底了..');
63af45 113                         this.busy = true;
I 114                         this.loading = false;
115                         return;
116                     } else {
117                         this.current += 1;
118                     }
aab811 119
63af45 120                     return res
I 121                 })
aab811 122
I 123                 setTimeout(function() {
124                     this.loading = false;
63af45 125                 }, 100);
aab811 126
I 127
128             },
129         },
130     };
131 </script>
132 <style>
133     /* .test {
134         overflow: hidden;
135         height: 700px;
136     }
137
138     .infinite-container {
139         overflow: auto;
140     }
141
142     .infinite-container::-webkit-scrollbar {
143         display: none;
144     } */
145
146     .demo-loading-container {
147         position: absolute;
148         bottom: 40px;
149         width: 100%;
150         text-align: center;
151     }
152 </style>