vue-infinite-scroll 实现触底加载

说明

如果项目中需要实现触底加载，可以使用vue-infinite-scroll来实现。

安装

通过下面的命令可以进行安装：

npm install vue-infinite-scroll -S

配置

// main.js
import infiniteScroll from 'vue-infinite-scroll'

Vue.use(infiniteScroll)

使用

在内容的外部，加上一层容器，进行如下的设置：

<div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
  ...
</div>

属性说明：

• v-infinite-scroll="loadMore"表示回调函数是loadMore
• infinite-scroll-disabled="busy"表示由变量busy决定是否执行loadMore，false则执行loadMore，true则不执行，注意，busy表示繁忙，繁忙的时候是不执行的。
• infinite-scroll-distance="10"这里10决定了页面滚动到离页尾多少像素的时候触发回调函数，10是像素值。一般情况下会在页尾做一个几十像素高的“正在加载中…”，这样的话，可以把这个div的高度设为infinite-scroll-distance的值即可。

<div v-infinite-scroll="loadDataList"
      infinite-scroll-disabled="dataLoadStop"
      infinite-scroll-distance="50">
   <div v-for="(item, idx) in dataList" >
       <div class="comdata"><span>{{item.name}}</span></div>
   </div>
   <div class="list-load-end">
       <span>{{dataNomore ? "--我也是有底线的--" : "加载中..."}}</span>
   </div>
 </div>

关于更为详细的内容，可以点击这里查看。

使用插件报错

如果在使用时出现如下的报错：

Error in directive infinite-scroll inserted hook: “TypeError: Failed to execute ‘observe’ on ‘MutationObserver’: parameter 1 is not of type ‘Node’.”
Failed to execute ‘observe’ on ‘MutationObserver’: parameter 1 is not of type ‘Node’.

可以进行给设置了无限滚动的容器设置下面的样式：

<div class="wrap"
   v-infinite-scroll = "loadMore"
   infinite-scroll-disabled = "loading"
   infinite-scroll-distance = "10"
></div>

.wrap {
    height: 100vh;
    overflow-y: auto;
}

经过上述的设置，报错信息就会消失。