inleft
2022-03-02 846bd0e9adb70bb23778045ee1a252a6a58adc4f
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>