Vue中的无限加载vue-infinite-loading的方法


Posted in Javascript onApril 08, 2018

本文介绍了Vue中的无限加载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 src="vue-infinite-loading.js"></script>

在页面中应用

直接在组件中声明

components:{
  InfiniteLoading
}

模板部分

<infinite-loading @infinite="infiniteHandler">
  <span slot="no-more">
     我们是有底线的
  </span>
</infinite-loading>

js部分

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

infiniteHandler($state) {
     setTimeout(() => {
       const temp = [];
       for (let i = this.list.length + 1; i <= this.list.length + 20; i++) {
         temp.push(i);
       }
       this.list = this.list.concat(temp);
       $state.loaded();
       $state.complete();
     }, 1000);
}

注意

如果还是使用
this.$refs.infiniteLoading.$emit('$InfiniteLoading:loaded');
this.$refs.infiniteLoading.$emit('$InfiniteLoading:complete');
会出现警告,告诉你已经修改为传参传入$state使用这个方法。

属性

distance:这是滚动的临界值。如果到滚动父元素的底部距离小于这个值,那么infiniteHandler回调函数就会被调用。

<infinite-loading @infinite="infiniteHandler" distance="Number">
</infinite-loading>

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

<infinite-loading @infinite="infiniteHandler" spinner="String">
</infinite-loading>

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

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

direction="top"

<infinite-loading @infinite="infiniteHandler" direction="String">
</infinite-loading>

本文借鉴:https://3water.com/article/137896.htm

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery技巧大放送 学习jquery的朋友可以看下
Oct 14 Javascript
JavaScript CSS修改学习第二章 样式
Feb 19 Javascript
JS函数验证总结(方便js客户端输入验证)
Oct 29 Javascript
CodeMirror2 IE7/IE8 下面未知运行时错误的解决方法
Mar 29 Javascript
jquery获得页面元素的坐标值实现思路及代码
Apr 15 Javascript
JavaScript获取当前页面上的指定对象示例代码
Feb 28 Javascript
JavaScript实现动态添加,删除行的方法实例详解
Jul 02 Javascript
jQuery Mobile页面返回不需要重新get
Apr 26 Javascript
js实现的页面加载完毕之前loading提示效果完整示例【附demo源码下载】
Aug 02 Javascript
使用BootStrap建立响应式网页——通栏轮播图(carousel)
Dec 21 Javascript
如何对react hooks进行单元测试的方法
Aug 14 Javascript
jQuery实现简单飞机大战
Jul 05 jQuery
vue-infinite-loading2.0 中文文档详解
Apr 08 #Javascript
Vue 页面切换效果之 BubbleTransition(推荐)
Apr 08 #Javascript
JS简单实现查看文档创建日期、修改日期和文档大小的方法示例
Apr 08 #Javascript
Js面试算法详解
Apr 08 #Javascript
JS简单获取并修改input文本框内容的方法示例
Apr 08 #Javascript
详解vue表单——小白速看
Apr 08 #Javascript
JS简单实现动态添加HTML标记的方法示例
Apr 08 #Javascript
You might like
PHP 文件上传进度条的两种实现方法的代码
2007/11/25 PHP
php自动加载机制的深入分析
2013/06/08 PHP
深入解析PHP 5.3.x 的strtotime() 时区设定 警告信息修复
2013/08/05 PHP
php的GD库imagettftext函数解决中文乱码问题
2015/01/24 PHP
Yii清理缓存的方法
2016/01/06 PHP
javascript Array数组对象的扩展函数代码
2010/05/22 Javascript
jQuery News Ticker 基于jQuery的即时新闻行情展示插件
2011/11/05 Javascript
解析Javascript中大括号“{}”的多义性
2013/12/02 Javascript
JS按回车键实现登录的方法
2014/08/25 Javascript
Js使用WScript.Shell对象执行.bat文件和cmd命令
2014/12/18 Javascript
javascript中parseInt()函数的定义和用法分析
2014/12/20 Javascript
angular简介和其特点介绍
2015/01/29 Javascript
jQuery插件jPaginate实现无刷新分页
2015/05/04 Javascript
JavaScript代码生成PDF文件的方法
2016/02/26 Javascript
Bootstrap3.0建站教程(一)之bootstrap表单元素排版
2016/06/01 Javascript
jQuery鼠标事件总结
2016/10/13 Javascript
JSON 必知必会 观后记
2016/10/27 Javascript
jQuery中的siblings()是什么意思(推荐)
2016/12/29 Javascript
Jquery中attr与prop的区别详解
2017/05/27 jQuery
tsconfig.json配置详解
2019/05/17 Javascript
个人小程序接入支付解决方案
2019/05/23 Javascript
使用Vue.observable()进行状态管理的实例代码详解
2019/05/26 Javascript
JavaScript定时器常见用法实例分析
2019/11/15 Javascript
Javascript前端下载后台传来的文件流代码实例
2020/08/18 Javascript
Vue实现点击当前行变色
2020/12/14 Vue.js
[03:08]TI9战队档案 - Vici Gaming
2019/08/20 DOTA
解决python3 json数据包含中文的读写问题
2018/05/10 Python
Windows下将Python文件打包成.EXE可执行文件的方法
2018/08/03 Python
Python 带有参数的装饰器实例代码详解
2018/12/06 Python
Pytorch 实现数据集自定义读取
2020/01/18 Python
html5通过canvas实现刮刮卡效果示例分享
2014/01/27 HTML / CSS
台湾菁英交友:结识黄金单身的台湾人
2018/01/22 全球购物
俄罗斯设计师家具购物网站:The Furnish
2019/12/01 全球购物
小学数学教学经验交流材料
2014/05/22 职场文书
行政执法队伍作风整顿剖析材料
2014/10/11 职场文书
Mysql数据库表中为什么有索引却没有提高查询速度
2022/02/24 MySQL