gitHub官网:https://github.com/ElemeFE/vue-infinite-scroll
安装:
npm install vue-infinite-scroll --save
使用: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>
data () {
return {
busy: false
}
}
methods: {
loadMore: function() {
console.log("回调函数,加载下一页")
}
}
选项说明:
选项 | 说明 |
---|---|
v-infinite-scroll=“loadMore” | 表示回调函数是loadMore |
infinite-scroll-disabled=“busy” | 表示由变量busy决定是否执行loadMore,false则执行loadMore,true则不执行 |
infinite-scroll-distance=“10” | 页面滚动到离页尾10像素的时候触发回调函数 |
infinite-scroll-immediate-check | 默认值为true,表示在绑定后立即检查busy的值和是否滚动到底 |
infinite-scroll-listen-for-event | 表示当事件在Vue实例中发出时,无限滚动将再次检查 |
infinite-scroll-throttle-delay | 检查busy的值的时间间隔,默认值是200 |