VUE很好用的 下拉加载/无限加载/滚动加载插件 Vue-infinite-loading

?真的很好用

话不多说开始介绍

先是安装下载，就不写cdn方式了哈

npm install vue-infinite-loading -S

然后在main.j中引入使用,配置可写可不写，我自己使用的时候没有在全局写配置，因为每个地方展示的内容可能不一样

import InfiniteLoading from 'vue-infinite-loading';
Vue.use(InfiniteLoading, { /* 配置 */ });

然后就可以再页面上使用，放在列表元素下面的位置

<div class="list">
     <div class="item" v-for="(item,index) in list" :key="index">
         <div class="head-img">
             <img :src="item.headImg" alt="">
         </div>
     </div>
 </div>
 <infinite-loading :identifier="infiniteId" @infinite="infiniteHandler">
     <div v-show="list.length > 0" slot="no-more" style="padding:32px 0;color:#9a9a9a;font-size:16px;">已经到底了哦</div>
     <div slot="no-results" style="padding:32px 0;color:#9a9a9a;font-size:16px;">暂无数据</div>
 </infinite-loading>

identifier 属性发生变化的时候，该组件就会自行重设，所以我的理解是应该将它写成动态的吧，官方说得很有道理,在return数据中定义一下infiniteId

data () {
        return {
            athleteId: '',
            list: [
                // {headImg: require('@/assets/img.png'), nickName: '可爱的小天使可爱', voteNum: '5966'}
            ],
            page: 0,
            pageSize: 10,
            infiniteId: +new Date()
        }
    },

@infinite是加载的事件， $state.loaded()代表加载成功；

$state.loaded()代表全部加载完成，停止触发滚动加载

infiniteHandler($state) {
    let pms = {
        page: this.page += 1,
        pageSize: this.pageSize,
    }
    findVotePersonDetail(pms).then(res => { //执行请求函数，具体看自己怎么写
        if (res.code === 200 && res.data.data.length > 0) {
            let arr = res.data.data
            this.list = [...this.list, ...arr]
            $state.loaded();
        } else {
            $state.complete();
        }
    }).catch(res => {
        this.$toast.fail('加载出错' + res.data);
        $state.loaded();
    })
},

简单配置加载提示和样式

<infinite-loading>
  <div slot="spinner" spinner="spiral">Loading...</div>
  <div slot="no-more">No more message</div>
  <div slot="no-results">No results message</div>
</infinite-loading>

spiral的效果

no-more就是加载完成
no-results就是没有内容