vue-infinite-loading简要教程

xioqua 发布于2019-08-23 12:17 / 1605人阅读

摘要：或需要累加载页面元素时。在组件中监听事件。事件触发的函数有一个特殊事件参数。表示已经加载成功，用于当次加载数据成功时。改变加载按钮的显示条件。与选项卡结合使用。为组件设置为一个切换的事件绑定函数在该函数体中清空列表后改变

function

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

install

npm i vue-infinite-loading --save

import InfiniteLoading from "vue-infinite-loading" 或 const InfiniteLoading require("vue-infinite-loading")

usage

需要累加载页面元素时。

放在页面底部。

在InfinityLoading组件中监听infinite事件。

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

properties

distance InfiniteLoading距离底部多远时触发加载数据的事件。

spinner 等待加载数据时的动画。 default/bubbles/circles/spiral/waveDots

ref

direction 触发加载数据的滑动方法 bottom/top

slot

no-resluts

no-more

spinner

在服务端渲染（ssr）

use
import InfiniteLoading from "vue-infinite-loading/src/components/InfiniteLoading.vue"
import InfiniteLoading from "vue-infinite-loading"

npm i less less-loader --save-dev

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

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

手动触发加载数据

设置一个加载按钮，为其绑定加载事件。

加载按钮与InfinityLoaing组件的显示互斥。（v-if, v-else）

页面初始化时，渲染加载按钮（也就是说不渲染InfiniteLoading组件）。

点击加载按钮时。改变加载按钮的显示条件。出现InfiniteLoading组件，它开始工作。

InfiniteLoading加载数据后再次改变加载按钮的显示条件。

vue-infinite-loading与选项卡结合使用。

为vue-infinite-loading组件设置:indentifier="sv"
为一个切换tab的事件（@click="fn"）绑定函数
在该函数体中清空列表后改变sv

GPU云服务器云服务器 asp教程教程 hadoop教程视频教程 php教程菜鸟教程 js坦克大战教程教程

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98261.html

vue-infinite-loading简要教程

摘要：或需要累加载页面元素时。在组件中监听事件。事件触发的函数有一个特殊事件参数。表示已经加载成功，用于当次加载数据成功时。运行可以使用组件回到初始状态，此时组件会立即请求新数据。改变加载按钮的显示条件。 function 可以实现瀑布流式累加载。 install npm i vue-infinite-loading --save import InfiniteLoading from v...

xiaoqibTn 2019-08-02 11:41 评论0 收藏0
Spring Boot [组件学习-Spring]

摘要：框架最初是由编写的，并且年月首次在许可下发布。在一个方法执行之后，只有在方法退出抛出异常时，才能执行通知在建议方法调用之前和之后，执行通知。方法执行之后，不考虑其结果，执行通知。导读：在上篇文章的结尾提到了Spring Boot 提供了一系列的框架整合（Starter POMs)帮助我们提升开发效率,但是这并不意味着我们不需要学习这些框架，反而更需要去学习，通过学习这些框架可以使...

raoyi 2019-08-14 17:43 评论0 收藏0
8步从Python白板到专家，从基础到深度学习

摘要：去吧，参加一个在上正在举办的实时比赛吧试试你所学到的全部知识微软雅黑深度学习终于看到这个，兴奋吧现在，你已经学到了绝大多数关于机器学习的技术，是时候试试深度学习了。微软雅黑对于深度学习，我也是个新手，就请把这些建议当作参考吧。如果你想做一个数据科学家，或者作为一个数据科学家你想扩展自己的工具和知识库，那么，你来对地方了。这篇文章的目的，是给刚开始使用Python进行数据分析的人，指明一条全...

Zachary 2019-04-25 18:00 评论0 收藏0