inleft
2022-02-20 28d46dfc072a13859a5c0bc4901645b77022c7c3
commit | author | age
aab811 1 <template>
I 2     <div v-infinite-scroll="handleInfiniteOnLoad" class="demo-infinite-container" :infinite-scroll-disabled="busy"
3         :infinite-scroll-distance="10">
4         <a-list :data-source="data">
5             
6             <a-list-item slot="renderItem" slot-scope="item, index">
7                 <a-list-item-meta :description="item.email">
8                     <a slot="title" :href="item.href">{{ item.name.last }}</a>
9                     <a-avatar slot="avatar" src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
10                 </a-list-item-meta>
11                 <div>Content</div>
12             </a-list-item>
13             
14             <div v-if="loading && !busy" class="demo-loading-container">
15                 <a-spin />
16             </div>
17         </a-list>
18     </div>
19 </template>
20 <script>
21     import infiniteScroll from 'vue-infinite-scroll';
22
23     var tempData = [{
24         "gender": "female",
25         "name": {
26             "title": "Miss",
27             "first": "Alexis",
28             "last": "Novak"
29         },
30         "email": "alexis.novak@example.com",
31         "nat": "CA"
32     }, {
33         "gender": "female",
34         "name": {
35             "title": "Mrs",
36             "first": "Rajaa",
37             "last": "Seegers"
38         },
39         "email": "rajaa.seegers@example.com",
40         "nat": "NL"
41     }, {
42         "gender": "male",
43         "name": {
44             "title": "Mr",
45             "first": "Elias",
46             "last": "Pelto"
47         },
48         "email": "elias.pelto@example.com",
49         "nat": "FI"
50     }, {
51         "gender": "male",
52         "name": {
53             "title": "Mr",
54             "first": "Mille",
55             "last": "Christensen"
56         },
57         "email": "mille.christensen@example.com",
58         "nat": "DK"
59     }, {
60         "gender": "male",
61         "name": {
62             "title": "Mr",
63             "first": "Gerardo",
64             "last": "Marquez"
65         },
66         "email": "gerardo.marquez@example.com",
67         "nat": "ES"
68     }];
69
70     export default {
71         directives: {
72             infiniteScroll
73         },
74         data() {
75             return {
76                 data: [],
77                 loading: false,
78                 busy: false,
79             };
80         },
81         beforeMount() {
82             this.data = tempData;
83         },
84         methods: {
85
86             handleInfiniteOnLoad() {
87                 const data = this.data;
88                 this.loading = true;
89                 if (data.length > 10) {
90                     this.$message.warning('Infinite List loaded all');
91                     console.log(1);
92                     this.busy = true;
93                     this.loading = false;
94                     return;
95                 }
96
97                 setTimeout(function() {
98                     this.loading = false;
99                 }, 2000);
100                 this.data = data.concat(tempData);
101
102             },
103         },
104     };
105 </script>
106 <style>
107     .demo-infinite-container {
108         border: 1px solid #e8e8e8;
109         border-radius: 4px;
110         overflow: auto;
111         padding: 8px 24px;
112         height: 300px;
113     }
114
115     .demo-loading-container {
116         position: absolute;
117         bottom: 40px;
118         width: 100%;
119         text-align: center;
120     }
121 </style>