web项目经常会用到下拉滚动加载数据的功能,今天就来种草 vue-infinite-loading 这个插件,讲解一下使用方法!

第一步:安装

第二步:引用

第三步:使用

1.基本用法

2.分页用法

说明: $state: 该组件会传递一个特殊的事件参数$state给事件处理器来改变加载状态,$state参数包括三个方法,它们是loaded方法,complete方法和reset方法。

  • loaded方法用于在每次加载数据后停止播放动画,然后该组件将准备好进行下一次触发。
  • complete方法用于完成完整的无限加载,则该组件将不再处理任何滚动操作。如果在loaded调用complete方法时永远不会调用该方法,则此组件将显示用户的结果消息,如果不是,则将显示不再有用户消息,并且可以按slot设置其它内容
  • reset方法是将组件返回到原来的状态

3.条件用法

官方链接:

github链接:https://github.com/peachscript/vue-infinite-loading

以上就是vue实现下拉滚动加载数据的示例的详细内容,更多关于vue下拉滚动加载数据的资料请关注www.887551.com其它相关文章!