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
122
123
124
125
126
127
128
129
<template>
    <div>
        <div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" :infinite-scroll-distance="10">
            <div v-for="temp in data">
                <newArticle></newArticle>
                <box5 v-bind="temp"></box5>
            </div>
            <div v-if="loading && !busy" class="demo-loading-container">
                <a-spin />
            </div>
        </div>
        <a-row type="flex" justify="center">
            <div style="position:fixed;bottom: 10px;" id="dddadf">
                <a-pagination @change="onChange" :showQuickJumper="true" :size="size" v-model="current"
                    :defaultPageSize="pageSize" :total="total" />
            </div>
        </a-row>
        <a-back-top>
            <a-icon type="up" />回到顶部
        </a-back-top>
    </div>
</template>
<script>
    import infiniteScroll from 'vue-infinite-scroll';
    import box5 from "../mini/box5-article.vue"
    import babyActicle from '../../assets/baby.htm'
    import newArticle from "../mini/box-new-article.vue"
    import shijie from '../../assets/shijie.htm'
 
    var obj1 = {
        "source": babyActicle,
        "title": "陈奕迅-Body Song 歌词",
        "read": 1101,
        "like": 233,
        "folder": "歌词",
        "publishTime": "2021-05-26",
    }
    var obj2 = {
        "source": shijie,
        "title": "这世界那么多人-吉他谱",
        "read": 3101,
        "like": 113,
        "folder": "吉他谱",
        "publishTime": "2020-05-26",
    }
    var obj3 = {
        "source": shijie,
        "title": "遥远的它-吉他谱",
        "read": 201,
        "like": 13,
        "folder": "吉他谱",
        "publishTime": "2022-07-26",
    }
 
    export default {
        components: {
            box5,
            newArticle
        },
        directives: {
            infiniteScroll
        },
        data() {
            return {
 
                data: [],
                loading: false,
                busy: false,
                size: "small",
                total: 500,
                pageSize: 20,
                current: 1,
            };
        },
        beforeMount() {
            this.data = [obj1, obj2,obj3,obj2];
        },
        methods: {
            onChange(current) {
                this.current = current;
                this.data = [obj2, obj3, obj1, obj2];
            },
            loadMore() {
                const data = this.data;
                this.loading = true;
 
                this.current += 1;
                console.log(this.current);
                console.log(this.busy);
 
                if (data.length > 15) {
                    this.$message.warning('没有更多了');
                    this.busy = true;
                    this.loading = false;
                    return;
                }
 
 
                setTimeout(function() {
                    this.loading = false;
                }, 1000);
 
                this.data = data.concat(obj1, obj3, obj2, obj3, obj1);
 
            },
        },
    };
</script>
<style>
    /* .test {
        overflow: hidden;
        height: 700px;
    }
 
    .infinite-container {
        overflow: auto;
    }
 
    .infinite-container::-webkit-scrollbar {
        display: none;
    } */
 
    .demo-loading-container {
        position: absolute;
        bottom: 40px;
        width: 100%;
        text-align: center;
    }
</style>