脚本宝典收集整理的这篇文章主要介绍了vue-infinite-loading简要教程，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

function

可以实现瀑布流式累加载。

install

1. npm i vue-infinITe-loading --save
2. import InfiniteLoading From 'vue-infinite-loading' 或 const InfiniteLoading require('vue-infinite-loading')
3. <script src="/path/to/vue-infinite-loading/dist/vue-infinite-loading.js"></script>

usage

1. 需要累加载页面元素时。
2. 放在页面底部。
3. 在InfinityLoading组件中监听infinite事件。

infinite事件触发的函数有一个特殊事件参数（$state）。
$state.loaded() => 表示已经加载成功，用于当次加载数据成功时。此时出现Slot="no-more"的内容
$state.COMplete() => 表示已经加载完成，用于加载数据结束时。此时出现slot="no-resluts"的内容
$state.reset() => 表示
<tag slot="no-more"></tag> => 表示在没有更多元素时（即加载完数据时）显示
在InfinityLoading组件中设置ref="child"。运行this.$refs.child.$emit('$InfiniteLoading:reset')可以使用组件回到初始状态，此时组件会立即请求新数据。
可以写多个参数 <infinite-loading @infinite="handler($event, arg0, arg1, arg2)"></infinite-loading>

PRoPErties

1. distance InfiniteLoading距离底部多远时触发加载数据的事件。
2. spinner 等待加载数据时的动画。 default/bubbles/circles/spiral/waveDots
3. ref
4. direction 触发加载数据的滑动方法 bottom/top

slot

1. no-resluts
2. no-more
3. spinner

在服务端渲染（ssr）

1. use
   import InfiniteLoading from 'vue-infinite-loading/src/components/InfiniteLoading.vue'
   import InfiniteLoading from 'vue-infinite-loading'
2. npm i less less-loader --save-dev

与第三方滚动插件一起使用。

（我不会那这些第三方插件，所以我不会处理这种情况）

手动触发加载数据

1. 设置一个加载按钮，为其绑定加载事件。
2. 加载按钮与InfinityLoaing组件的显示互斥。（v-if, v-else）
3. 页面初始化时，渲染加载按钮（也就是说不渲染InfiniteLoading组件）。
4. 点击加载按钮时。改变加载按钮的显示条件。出现InfiniteLoading组件，它开始工作。
5. InfiniteLoading加载数据后再次改变加载按钮的显示条件。

脚本宝典总结

以上是脚本宝典为你收集整理的vue-infinite-loading简要教程全部内容，希望文章能够帮你解决vue-infinite-loading简要教程所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。