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