记录vue-infinite-scroll:列表无限加载使用步骤(超简洁)

1.安装

cnpm i vue-infinite-scroll --save

2.main.js中引入

import vueiInfinite from 'vue-infinite-scroll'

Vue.use(vueiInfinite)

3.vue文件中使用(需要无限加载的标签添加:v-infinite-scroll="loadMore")

<ul class="newsList" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="5">

      <li v-for="(item,index) in newsList"></li>

</ul>





<div id="loadMore" v-show="droping">加载中</div>

<div id="loadMore" v-show="noMore">没有更多的数据</div>

data () { return { busy:false, newsList: [], moreList : [], i : 0, droping : false, noMore : false } }

 

 

选项解释

v-infinite-scroll="loadMore"表示回调函数是loadMore