inleft
2022-03-03 dc66ec6f3c3ae560bdcbb5e0a1790b27228205e8
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>
7             
f60b31 8             <div v-for="(temp,index) in data" >
I 9                 <newArticle v-bind="temp" :index="index"></newArticle>
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">
ec97e0 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     var obj1 = {
38         "source": babyActicle,
39         "title": "陈奕迅-Body Song 歌词",
40         "read": 1101,
41         "like": 233,
42         "folder": "歌词",
43         "publishTime": "2021-05-26",
44     }
45     var obj2 = {
46         "source": shijie,
47         "title": "这世界那么多人-吉他谱",
48         "read": 3101,
49         "like": 113,
50         "folder": "吉他谱",
51         "publishTime": "2020-05-26",
52     }
53     var obj3 = {
54         "source": shijie,
55         "title": "遥远的它-吉他谱",
56         "read": 201,
57         "like": 13,
58         "folder": "吉他谱",
59         "publishTime": "2022-07-26",
60     }
61
62     export default {
63         components: {
06ee76 64             box5,
L 65             newArticle
aab811 66         },
I 67         directives: {
68             infiniteScroll
69         },
f60b31 70
aab811 71         data() {
I 72             return {
4b854c 73                 typeId: "",
aab811 74                 data: [],
I 75                 loading: false,
76                 busy: false,
77                 size: "small",
63af45 78                 total: 1,
a71b64 79                 pageSize: 6,
aab811 80                 current: 1,
f60b31 81                 defaultPageSize:10
aab811 82             };
I 83         },
4b854c 84         watch: {
I 85             '$route'(to, from) {
86                 if ("articleList" === to.name) {
87                     this.typeId = this.$route.query.typeId;
88                 }
89             },
90             typeId: function(newValue, oldValue) {
91                 this.busy = true;
81c155 92                 this.$message.info('loading', 0.3);
4b854c 93                 this.onChange(1);
f60b31 94             },
4b854c 95         },
I 96         activated() {
97             window.addEventListener('scroll', this);
98         },
99         deactivated() {
100             window.removeEventListener('scroll', this);
101         },
aab811 102         beforeMount() {
63af45 103             queryBlogArticleList({
4b854c 104                 pageNo: this.current,
f60b31 105                 pageSize:this.pageSize,
4b854c 106                 typeId: this.typeId
63af45 107             }).then((res) => {
I 108                 this.total = Number(res.data.total)
109                 this.pageSize = Number(res.data.size);
110                 this.data = res.data.records;
111                 return res
112             })
aab811 113         },
I 114         methods: {
115             onChange(current) {
116                 this.current = current;
63af45 117                 queryBlogArticleList({
4b854c 118                     pageNo: current,
f60b31 119                     pageSize:this.pageSize,
4b854c 120                     typeId: this.typeId
63af45 121                 }).then((res) => {
I 122                     this.busy = false;
123                     this.total = Number(res.data.total)
124                     this.pageSize = Number(res.data.size);
125                     this.data = res.data.records;
126                     return res
127                 })
aab811 128             },
I 129             loadMore() {
130                 this.loading = true;
63af45 131                 this.busy = true;
4b854c 132
63af45 133                 queryBlogArticleList({
4b854c 134                     pageNo: this.current + 1,
f60b31 135                     pageSize:this.pageSize,
4b854c 136                     typeId: this.typeId
63af45 137                 }).then((res) => {
aab811 138
63af45 139                     this.total = Number(res.data.total)
I 140                     this.pageSize = Number(res.data.size);
141                     this.data = this.data.concat(res.data.records);
142                     this.busy = false;
143                     if (res.data.records.length == 0) {
4b854c 144                         //this.$message.warning('别滑了,别滑了,到底了..');
63af45 145                         this.busy = true;
I 146                         this.loading = false;
147                         return;
148                     } else {
149                         this.current += 1;
150                     }
aab811 151
63af45 152                     return res
I 153                 })
aab811 154
I 155                 setTimeout(function() {
156                     this.loading = false;
63af45 157                 }, 100);
aab811 158
I 159
160             },
161         },
162     };
163 </script>
164 <style>
165     /* .test {
166         overflow: hidden;
167         height: 700px;
168     }
169
170     .infinite-container {
171         overflow: auto;
172     }
173
174     .infinite-container::-webkit-scrollbar {
175         display: none;
176     } */
177
178     .demo-loading-container {
179         position: absolute;
180         bottom: 40px;
181         width: 100%;
182         text-align: center;
183     }
184 </style>