欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Vue 无限滚动插件

程序员文章站 2022-03-29 08:22:12
...

插件

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>

Vue 无限滚动插件