说明
如果项目中需要实现触底加载,可以使用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;
}
经过上述的设置,报错信息就会消失。