vue插件vue-infinite-loading的使用

Posted 2020-11-12 流星飞雨

vue-infinite-loading官网：https://peachscript.github.io/vue-infinite-loading/ 
安装：

npm install vue-infinite-loading --save

　　

list.vue页面

<template>
    <div class="list-con">
        <div class="list" v-for="(item,key) in list">
            <span v-text="key+1"></span>
            <p>
                <a :href="item.url">{{item.title}}</a>
            </p>
        </div>
        <infinite-loading :on-infinite="onInfinite" ref="infiniteLoading">
           <span slot="no-more">没有更多消息了</span>
        </infinite-loading>
    </div>
</template>
<script>
import InfiniteLoading from ‘vue-infinite-loading‘;
const api = ‘http://hn.algolia.com/api/v1/search_by_date?tags=story‘;
export default {
    components: {
        InfiniteLoading,
    },
    data() {
        return {
            list: []
        }
    },
    mounted: function() {

    },
    methods: {

        onInfinite() {
            let params = {
                page: this.list.length / 20 + 1
            }
            this.$http.get(api, params).then((res) => {
                if (res.data.hits.length) {
                    this.list = this.list.concat(res.data.hits);
                    this.$refs.infiniteLoading.$emit(‘$InfiniteLoading:loaded‘);
                    if (this.list.length / 20 === 10) {
                        this.$refs.infiniteLoading.$emit(‘$InfiniteLoading:complete‘);
                    }
                } else {
                    this.$refs.infiniteLoading.$emit(‘$InfiniteLoading:complete‘);
                }
            })
        }
    }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .list{
    overflow:hidden;
    margin:20px 0;
  }
  span{
    float: left;
    margin-right: 5px;
  }
  p{
    float: left;
  }
</style>