当前位置: 首页 > Web前端 > HTML

vue-infinite-loading简明教程

时间:2023-04-02 14:03:47 HTML

功能可以实现瀑布式累积加载。installnpmivue-infinite-loading--saveimportInfiniteLoadingfrom'vue-infinite-loading'或constInfiniteLoadingrequire('vue-infinite-loading')加载页面元素时需要累的使用。在页面底部。监听InfinityLoading组件中的无限事件。由无限事件触发的函数有一个特殊的事件参数($state)。$state.loaded()=>表示加载成功,在数据加载成功时使用。这时候就出现了slot="no-more"的内容。$state.complete()=>表示加载完成,在加载数据结束时使用。这时出现slot="no-resluts"的内容$state.reset()=>表示=>表示当没有更多的元素时(即,当加载数据时)在InfinityLoading组件中显示设置ref="child"。运行this.$refs.child.$emit('$InfiniteLoading:reset')将组件返回到初始状态,它立即请求新数据。可以写多个参数propertiesdistanceInfiniteLoading距离底层多远触发加载数据的事件。在微调器等待数据加载时进行动画处理。default/bubbles/circles/spiral/waveDotsrefdirection触发加载数据的滑动方法bottom/topslotno-reslutsno-morespinnerrendersontheserver(ssr)useimportInfiniteLoadingfrom'vue-infinite-loading/src/components/InfiniteLoading.vue'importInfiniteLoading来自'vue-infinite-loading'npmilessless-loader--save-dev用于第三方滚动插件。(我不知道这些第三方插件,所以我不会处理这种情况)手动触发加载数据设置一个加载按钮并绑定加载事件。加载按钮的显示和InfinityLoaing组件是互斥的。(v-if,v-else)页面初始化时,渲染loading按钮(即不渲染InfiniteLoading组件)。单击加载按钮时。改变加载按钮的显示状态。InfiniteLoading组件出现并开始工作。InfiniteLoading加载数据后,再次改变加载按钮的显示状态。vue-infinite-loading与选项卡结合使用。为vue-infinite-loading组件设置:identifier="switchTrigger"为tab切换事件(@click="fn")绑定函数,在函数体中清除列表后改变switchTrigger

最新推荐
猜你喜欢