lijh
2022-01-18 15bd39c66eb9c1942b72fb373fbe16865f715f04
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">
5                 <box5 v-bind="temp"></box5>
6             </div>
7             <div v-if="loading && !busy" class="demo-loading-container">
8                 <a-spin />
9             </div>
10         </div>
019990 11         <a-row type="flex" justify="center">
I 12             <div style="position:fixed;bottom: 10px;" id="dddadf">
13                 <a-pagination @change="onChange" :showQuickJumper="true" :size="size" v-model="current"
14                     :defaultPageSize="pageSize" :total="total" />
15             </div>
16         </a-row>
aab811 17         <a-back-top>
I 18             <a-icon type="up" />回到顶部
19         </a-back-top>
20     </div>
21 </template>
22 <script>
23     import infiniteScroll from 'vue-infinite-scroll';
24     import box5 from "../mini/box5-article.vue"
25     import babyActicle from '../../assets/baby.htm'
26     import shijie from '../../assets/shijie.htm'
27
28     var obj1 = {
29         "source": babyActicle,
30         "title": "陈奕迅-Body Song 歌词",
31         "read": 1101,
32         "like": 233,
33         "folder": "歌词",
34         "publishTime": "2021-05-26",
35     }
36     var obj2 = {
37         "source": shijie,
38         "title": "这世界那么多人-吉他谱",
39         "read": 3101,
40         "like": 113,
41         "folder": "吉他谱",
42         "publishTime": "2020-05-26",
43     }
44     var obj3 = {
45         "source": shijie,
46         "title": "遥远的它-吉他谱",
47         "read": 201,
48         "like": 13,
49         "folder": "吉他谱",
50         "publishTime": "2022-07-26",
51     }
52
53     export default {
54         components: {
55             box5
56         },
57         directives: {
58             infiniteScroll
59         },
60         data() {
61             return {
62
63                 data: [],
64                 loading: false,
65                 busy: false,
66                 size: "small",
67                 total: 500,
68                 pageSize: 20,
69                 current: 1,
70             };
71         },
72         beforeMount() {
019990 73             this.data = [obj1, obj2,obj3,obj2];
aab811 74         },
I 75         methods: {
76             onChange(current) {
77                 this.current = current;
78                 this.data = [obj2, obj3, obj1, obj2];
79             },
80             loadMore() {
81                 const data = this.data;
82                 this.loading = true;
83
84                 this.current += 1;
85                 console.log(this.current);
86                 console.log(this.busy);
87
88                 if (data.length > 15) {
89                     this.$message.warning('没有更多了');
90                     this.busy = true;
91                     this.loading = false;
92                     return;
93                 }
94
95
96                 setTimeout(function() {
97                     this.loading = false;
98                 }, 1000);
99
100                 this.data = data.concat(obj1, obj3, obj2, obj3, obj1);
101
102             },
103         },
104     };
105 </script>
106 <style>
107     /* .test {
108         overflow: hidden;
109         height: 700px;
110     }
111
112     .infinite-container {
113         overflow: auto;
114     }
115
116     .infinite-container::-webkit-scrollbar {
117         display: none;
118     } */
119
120     .demo-loading-container {
121         position: absolute;
122         bottom: 40px;
123         width: 100%;
124         text-align: center;
125     }
126 </style>