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
130
131
132
133
134
135
136
137
<template>
    <div>
        <div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" :infinite-scroll-distance="10">
            <div class="mySecret" v-if="data.length==0">
                <p>空空如也..</p>
            </div>
 
            <div v-for="(temp,index) in data">
                <newArticle v-bind="temp" :index="index"></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;">
                <a-pagination @change="onChange" :showQuickJumper="true" :size="size" v-model="current"
                    :defaultPageSize="defaultPageSize" :pageSize="pageSize" :total="total" />
            </div>
        </a-row>
 
    </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'
    import {
        queryBlogArticleList
    } from '../../api/blogArticle.js'
 
    export default {
        components: {
            box5,
            newArticle
        },
        directives: {
            infiniteScroll
        },
 
        data() {
            return {
                typeId: "",
                data: [],
                loading: false,
                busy: false,
                size: "small",
                total: 1,
                pageSize: 6,
                current: 1,
                defaultPageSize: 10
            };
        },
        created() {
            this.typeId = this.$route.query.typeId;
        },
        watch: {
            '$route'(to, from) {
                if ("articleList" === to.name || "home" === to.name) {
                    this.typeId = this.$route.query.typeId;
                }
            },
            typeId: function(newValue, oldValue) {
                this.busy = true;
                this.$message.info('loading', 0.3);
                this.onChange(1);
            },
        },
        activated() {
            window.addEventListener('scroll', this);
        },
        deactivated() {
            window.removeEventListener('scroll', this);
        },
        methods: {
            onChange(current) {
                this.current = current;
                queryBlogArticleList({
                    pageNo: current,
                    pageSize: this.pageSize,
                    typeId: this.typeId
                }).then((res) => {
                    this.busy = false;
                    this.total = Number(res.data.total)
                    this.pageSize = Number(res.data.size);
                    this.data = res.data.records;
                    return res
                })
            },
            loadMore() {
                this.loading = true;
                this.busy = true;
 
                queryBlogArticleList({
                    pageNo: this.current + 1,
                    pageSize: this.pageSize,
                    typeId: this.typeId
                }).then((res) => {
 
                    this.total = Number(res.data.total)
                    this.pageSize = Number(res.data.size);
                    this.data = this.data.concat(res.data.records);
                    this.busy = false;
                    if (res.data.records.length == 0) {
                        //this.$message.warning('别滑了,别滑了,到底了..');
                        this.busy = true;
                        this.loading = false;
                        return;
                    } else {
                        this.current += 1;
                    }
 
                    return res
                })
 
                setTimeout(function() {
                    this.loading = false;
                }, 100);
 
 
            },
        },
    };
</script>
<style>
    .demo-loading-container {
        position: absolute;
        bottom: 40px;
        width: 100%;
        text-align: center;
    }
</style>