Vue无限加载vue-infinite-loading使用详解

注意：vue-infinite-loading2.0只能在Vue.js2.0中使用。如果你想在Vue.js1.0中使用，请安装vue-infinite-loading1.3版本

如何安装

npm install vue-infinite-loading --save

导入方式

<script>
    import InfiniteLoading from 'vue-infinite-loading';

    export default {
        mounted() {

        },
        components: {
            InfiniteLoading,//直接在组件中声明
        },
        methods: {
            infiniteHandler($state) {
                console.log("触发")
                setTimeout(() => {       
                    const temp = [];   
                    if(this.list.length>80){
                        $state.complete();
                        return;
                    }    
                    for (let i = this.list.length + 1; i <= this.list.length + 10; i++) {         
                        temp.push(i);       
                    }       
                    this.list = this.list.concat(temp);       
                    $state.loaded();       
                }, 1000);
            },
        },
        data() {
            return {
                distance:100,//临界值，距离底部多少距离时触发函数  infiniteHandler
                list: [1,2,3,4,5,6,7,8,9,0],//测试数据
            }
        }
    }
</script>

模板使用

<template>
    <div>
        <div v-for="(item, $index) in list" :key="$index">
            <recommend :title="`第${item}条数据`"></recommend>
        </div>
        <infinite-loading  :distance="distance" @infinite="infiniteHandler">
            <div slot="spinner">小弟拼命加载中...</div>//加载中的文字
            <div slot="no-more">已加载完毕!</div>//加载完毕的文字
            <div slot="no-results">暂无数据:(</div>//没有数据的文字
        </infinite-loading>
    </div>
</template>

加载动画

• bubbles
• circles
• default
• spiral
• waveDots