登录  /  注册
首页 > web前端 > js教程 > 正文

使用vue-infinite-loading实现无限加载功能

php中世界最好的语言
发布: 2018-05-25 15:39:34
原创
1272人浏览过

这次给大家带来使用vue-infinite-loading实现无限加载功能,使用vue-infinite-loading实现无限加载功能的注意事项有哪些,下面就是实战案例,一起来看一下。

注意:vue-infinite-loading2.0只能在Vue.js2.0中使用。如果你想在Vue.js1.0中使用,请安装vue-infinite-loading1.3版本

如何安装

npm install vue-infinite-loading --save
登录后复制

导入方式

es6模块导入方式

import InfiniteLoading from 'vue-infinite-loading';
export default {
 components: {
  InfiniteLoading
 },
};
登录后复制

CommonJS 模块导入方式

const InfiniteLoading = require('vue-infinite-loading');
export default {
 components: {
   InfiniteLoading
 }
};
登录后复制

其他方式

<script></script>
登录后复制

在页面中应用

直接在组件中声明

components:{
  InfiniteLoading
}
登录后复制

模板部分

<infinite-loading>
  <span>
     我们是有底线的
  </span>
</infinite-loading>
登录后复制

js部分

当滚动到底部时自动触发infiniteHandler事件

infiniteHandler($state) {
     setTimeout(() =&gt; {
       const temp = [];
       for (let i = this.list.length + 1; i <p style="text-align: left;"><strong>注意</strong></p><p style="text-align: left;">如果还是使用<br>this.$refs.infiniteLoading.$emit('$InfiniteLoading:loaded');<br>this.$refs.infiniteLoading.$emit('$InfiniteLoading:complete');<br>会出现警告,告诉你已经修改为传参传入$state使用这个方法。</p><p style="text-align: left;"><strong>属性</strong></p><p style="text-align: left;">distance:这是滚动的临界值。如果到滚动父元素的底部距离小于这个值,那么infiniteHandler<a href="http://www.php.cn/code/8530.html" target="_blank">回调函数</a>就会被调用。</p><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><infinite-loading></infinite-loading>
登录后复制
登录后复制
登录后复制

spinner:通过这个属性,你可以选择一个你最喜爱旋转器作为加载动画。
spinner="bubbles";
1、bubbles
2、circles
3、default
4、spiral
5、waveDots

<infinite-loading></infinite-loading>
登录后复制
登录后复制

direction:如果你设置这个属性为top,那么这个组件将在你滚到顶部的时候,调用infiniteHandler函数。

警告:你必须在数据加载后,手动地将滚动父元素的scrollTop设置为正确的值,否则,该组件会一次又一次调用infiniteHandler函数。

direction="top"

<infinite-loading></infinite-loading>
登录后复制
登录后复制

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

使用webpack插件html-webpack-plugin实例详解

怎么实现微信小程序登录鉴权

以上就是使用vue-infinite-loading实现无限加载功能的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
收藏 点赞
上一篇:如何创建ajax对象并兼容多个浏览器 下一篇:Ajax请求内嵌套Ajax请求示例代码
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
相关专题
更多>
热门推荐
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号