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