| 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> | |
