vue插件vue-infinite-loading 加载更多用法

首先先下载 

npm install vue-infinite-loading --save

下载完成后

在需要用的页面引入该组件

import InfiniteLoading from 'vue-infinite-loading';

然后注册组件

components: {
InfiniteLoading,
}

 

写一个方法

methods: {
            onInfinite() {//写一个方法
                var _this = this;
                var pagesize=3;
            _this.page+=1;
                axios.get('../../static/json/homelist.json').then(function(data) {
                    if(data.data.DoubanHeadlines.length>0) {
                        if(pagesize*(_this.page)>=data.data.DoubanHeadlines.length) {
                            _this.$refs.infiniteLoading.$emit('$InfiniteLoading:complete');//停止加载
                        }else{
                            for(var i=pagesize*((_this.page)-1);i<pagesize*(_this.page);i++){
                        _this.homelist.push(data.data.DoubanHeadlines[i]) ;
                        _this.$refs.infiniteLoading.$emit('$InfiniteLoading:loaded');//加载
                        }
                        }
                    } else {
                        console.log("3+:" + _this.homelist.length)
                        _this.$refs.infiniteLoading.$emit('$InfiniteLoading:complete');
                    }
                }).catch(function() {
                    console.log("ajax error")
                });
            },
        }

在dom结构中加入

    <infinite-loading :on-infinite="onInfinite" ref="infiniteLoading">//调用方法
            <span slot="no-more">//停止后显示的内容
            已经没有啦~~
          </span>
        </infinite-loading>

完整例子

<template>
    <div>
        <div class="flex_40">
            <div>
                <ul>
                    <li>
                        <a>影院热映</a>
                    </li>
                    <li>
                        <a>欧美新榜</a>
                    </li>
                    <li>
                        <a>注册账号</a>
                    </li>
                    <li>
                        <a>登录豆瓣</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="list-link" v-for="item in homelist">
            <a class="thumbnail">
                <div class="content"><img :src="item.images" alt="cover">
                    <h3>{{item.title}}</h3>
                    <p>{{item.Matters}}</p>
                </div>
                <div class="author"><span class="name">{{item.author}}</span>
                    <span class="label">
                     {{item.label}}
                      </span>
                </div>
            </a>

        </div>
        <infinite-loading :on-infinite="onInfinite" ref="infiniteLoading">
            <loading></loading>
            <span slot="no-more">
            已经没有啦~~
          </span>
        </infinite-loading>
    </div>
</template>

<script>
    import InfiniteLoading from 'vue-infinite-loading';
    import loading from "@/components/Loading"
    import axios from "axios"
    export default {
        name: "home",
        data() {
            return {
                homelist: [],
                isshow: false,
                page:0
            }
        },
        components: {
            InfiniteLoading,
            loading
        },
        methods: {
            onInfinite() {
                var _this = this;
                var pagesize=3;
            _this.page+=1;
                axios.get('../../static/json/homelist.json').then(function(data) {
                    if(data.data.DoubanHeadlines.length>0) {
                        if(pagesize*(_this.page)>=data.data.DoubanHeadlines.length) {
                            _this.$refs.infiniteLoading.$emit('$InfiniteLoading:complete');
                        }else{
                            for(var i=pagesize*((_this.page)-1);i<pagesize*(_this.page);i++){
                        _this.homelist.push(data.data.DoubanHeadlines[i]) ;
                        _this.$refs.infiniteLoading.$emit('$InfiniteLoading:loaded');
                        }
                        }
                    } else {
                        console.log("3+:" + _this.homelist.length)
                        _this.$refs.infiniteLoading.$emit('$InfiniteLoading:complete');
                    }
                }).catch(function() {
                    console.log("ajax error")
                });
            },
        }
    }
</script>

<style scoped="scoped">
    .flex_40 {
        text-align: center;
        margin: 0 1.8rem;
        padding-top: .2rem;
    }
    
    .flex_40 ul {
        overflow: hidden;
        margin: 1rem;
        padding-top: .6rem;
    }
    
    .flex_40 li {
        float: left;
        width: 50%;
        padding: .3rem;
        box-sizing: border-box;
        font-size: 1.5rem;
    }
    .loading-default{
        background: url(../assets/loading_green.gif) no-repeat 0 0 100% !important;
    }
    .flex_40 li a {
        display: block;
        max-width: 100%;
        padding: 1.2rem 0;
        line-height: 2rem;
        text-align: center;
        background-color: white;
        color: #494949;
        border-radius: .2rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        word-wrap: normal;
    }
    
    .thumbnail {
        background-color: transparent;
        position: relative;
        display: block;
        padding: 2.5rem 1.8rem 2.5rem 0;
        margin-left: 1.8rem;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    }
    
    .thumbnail .content {
        overflow: hidden;
        margin-bottom: 1rem;
    }
    
    .thumbnail .content img {
        float: right;
        width: 25.6%;
        height: 8.678rem;
        margin-left: 2.5rem;
    }
    
    .thumbnail .content h3 {
        margin-top: 0;
        margin-bottom: .6rem;
        line-height: 1.41;
        text-align: justify;
        font-size: 1.7rem;
        font-weight: 500;
        color: #494949;
    }
    
    .thumbnail .content p {
        line-height: 1.5;
        text-align: justify;
        color: #aaa;
        font-size: 1.2rem;
        overflow: hidden;
    }
    
    .author {
        font-size: 1.2rem;
        color: #ccc;
    }
    
    .label {
        position: absolute;
        bottom: 2.5rem;
        right: 1.8rem;
    }
</style>