vue-infinite-loading的下拉加载更多等多个场景的使用

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue-infinite-loading的下拉加载更多等多个场景的使用相关的知识,希望对你有一定的参考价值。

参考技术A 主要是用了它的几个功能点

效果图

主要实现还是在 infiniteHandler($state) 这个方法里,参数 $state 必须带,是该插件的核心。 $state.complete() 、 $state.loaded() 主要是这两个方法,一个是结束、一个是继续加载。

js块

先到这里啦。路过得小伙伴给个赞哦~
有什么写的不对得地方可以帮忙指出哦。

vue插件vue-infinite-loading的使用

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>

以上是关于vue-infinite-loading的下拉加载更多等多个场景的使用的主要内容,如果未能解决你的问题,请参考以下文章

Vue项目中使用vue-infinite-loading插件实现页面数据滚动加载更多-使用案例

vue数据加载分页功能

vue的爬坑之路之----基于vue-cli 无限滚动插件无限加载

vue-element(四) el-table滚动加载

vue插件vue-infinite-loading的使用

如何在 Nuxt.js (Vue.js) 中使用 vue-infinite-loading