Vue 无限滚动插件

插件

vue-infinite-loading

安装

npm install vue-infinite-loading -S

使用案例

<template>
    <div class="card-body">
        <h5>评论</h5>
        <br>
        
        <ul class="list-unstyled">
            <li is="ListTemplate" v-for="item in comments" :comment="item" :key="item.id"></li>
        </ul>

        <InfiniteLoading @infinite="getComments" spinner="spiral">
            <div slot="no-more">没有更多评论</div>
        </InfiniteLoading>
    </div>
</template>

<script>
    import article from "../api/article";
    import ListTemplate from "../components/comment/ListTemplate";
    import InfiniteLoading from 'vue-infinite-loading';
    export default {
        name: "Comments",
        // props: ['article_id'],
        components: {
            ListTemplate,
            InfiniteLoading,
        },
        data: ()=>({
            comments: [],
            params: {
                article_id: '',
                // per_page: 5,
                page: 0,
            },
        }),
        created(){
            this.params.article_id = this.$attrs.article_id;
        },
        methods: {
        	// $state 是插件的传参
            getComments($state){
                this.params.page++;
                article.comments(this.params).then(res=>{
                    let result = res.data;
                    let {data} = result;
                    // 连接数组
                    this.comments = this.comments.concat(data);
					// 加载完毕
                    $state.loaded();
                    //如果分页参数大于最后一页 终止加载
                    if(this.params.page >= result.meta.last_page){
                        $state.complete();
                    }
                }).catch(()=>{
                    $state.loaded();
                })
            },
        }
    }
</script>