vue无限滚动vue-infinite-scroll插件的配置及使用详解

vue无限滚动vue-infinite-scroll插件的配置及使用详解

npm install 插件 --save与 --save -dev的区别
npm i 插件 --save ，项目发布上线之后还会依赖用到的插件，没有这些插件，项目不能运行
npm i 插件 --save-dev ，安装到开发依赖中，项目上线之后不会用到的插件，

官网链接：https://github.com/ElemeFE/vue-infinite-scroll

下载依赖

cnpm  i vue-infinite-scroll --save

在min.js中引入相对应的组件

import infiniteScroll from 'vue-infinite-scroll'
Vue.use(infiniteScroll)

使用

   <div class="record-list scroll-list"
         v-infinite-scroll="loadMore"
         infinite-scroll-throttle-delay="500"
         infinite-scroll-disabled="busy"
         infinite-scroll-distance="10">
         //循环体列表之类就可以
      <list v-for="item in list"
                  :key="item.id"
                  :info="item"></list>
                  
      <div v-if="loadingShow"
           class="floor">
        <div class="floor_text">正在加载</div>
      </div>
      <div v-if="loadingError"
           class="floor">
        <div class="floor_text">加载失败</div>
      </div>
    </div>

methods

 methods: {
loadMore(){
console.log('滚动触底')
}
}

v-infinite-scroll=“loadMore” 滚动触发的回调函数loadMore
infinite-scroll-throttle-delay=“500” 检查busy的值的时间间隔，默认值是200，因为vue-infinite-scroll的基础原理是，vue-infinite-scroll会循环检查busy的值，以及是否滚动到底，只有当：busy为false且滚动到底，回调函数才会执行
infinite-scroll-disabled=“busy” 表示由变量busy决定是否执行loadMore，false则执行loadMore，true则不执行，注意，busy表示繁忙，繁忙的时候是不执行的。
infinite-scroll-distance=“10” 这里10决定了页面滚动到离页尾多少像素的时候触发回调函数，10是像素值。