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 相关文章推荐
javascript编程起步(第六课)
Jan 10 Javascript
JS弹出窗口代码大全(详细整理)
Dec 21 Javascript
JavaScript中json对象和string对象之间相互转化
Dec 26 Javascript
浅析ajax请求json数据并用js解析(示例分析)
Jul 13 Javascript
javascript中return,return true,return false三者的用法及区别
Nov 17 Javascript
AngularJS初始化静态模板详解
Jan 14 Javascript
Bootstrap每天必学之滚动监听
Mar 16 Javascript
Bootstrap 下拉多选框插件Bootstrap Multiselect
Jan 22 Javascript
使用typescript改造koa开发框架的实现
Feb 04 Javascript
详解vuejs中执行npm run dev出现页面cannot GET/问题
Apr 26 Javascript
解决vue打包报错Unexpected token: punc的问题
Oct 24 Javascript
javascript实现数字时钟效果
Feb 06 Javascript
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中删除字符串中最先出现某个字符的实现代码
2013/02/03 PHP
在PHP模板引擎smarty生成随机数的方法和math函数详解
2014/04/24 PHP
ThinkPHP模板之变量输出、自定义函数与判断语句用法
2014/11/01 PHP
php中current、next与reset函数用法实例
2014/11/17 PHP
PHP中通过fopen()函数访问远程文件示例
2014/11/18 PHP
Yii2针对指定url的生成及图片等的引入方法小结
2016/07/18 PHP
PHP单例模式实例分析【防继承,防克隆操作】
2019/05/22 PHP
文本加密解密
2006/06/23 Javascript
javascript 特性检测并非浏览器检测
2010/01/15 Javascript
jquery.cookie() 方法的使用(读取、写入、删除)
2013/12/05 Javascript
jQuery 隐藏和显示 input 默认值示例
2014/06/03 Javascript
javascript引用类型之时间Date和数组Array
2015/08/27 Javascript
JavaScript在网页中画圆的函数arc使用方法
2015/11/13 Javascript
JavaScript Math.round() 方法
2015/12/18 Javascript
JS中artdialog弹出框控件之提交表单思路详解
2016/04/18 Javascript
JavaScript实现图片无缝滚动效果
2017/07/07 Javascript
Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解
2017/08/01 jQuery
JS中双击和单击事件冲突的解决方法
2018/04/09 Javascript
bootstrap模态框弹出和隐藏,动态改变中间内容的实例
2018/08/10 Javascript
Vue.js组件实现选项卡以及切换特效
2019/07/24 Javascript
vuejs移动端实现div拖拽移动
2019/07/25 Javascript
python创建和使用字典实例详解
2013/11/01 Python
浅谈Scrapy框架普通反爬虫机制的应对策略
2017/12/28 Python
Python关于excel和shp的使用在matplotlib
2019/01/03 Python
python常见字符串处理函数与用法汇总
2019/10/30 Python
python中二分查找法的实现方法
2020/12/06 Python
python实现马丁策略回测3000只股票的实例代码
2021/01/22 Python
芬兰汽车配件商店:Autonvaraosat24
2017/01/30 全球购物
BIBLOO波兰:捷克的一家在线服装店
2018/03/09 全球购物
同程旅游英文网站:LY.com
2018/11/13 全球购物
函数只定义了一次, 调用了一次, 但编译器提示非法重定义了-什么问题?
2014/10/03 面试题
委托书的写法
2014/08/30 职场文书
见习报告格式要求
2014/11/04 职场文书
个人专业技术总结
2015/03/05 职场文书
2015年依法行政工作总结
2015/04/29 职场文书
详解Python常用的魔法方法
2021/06/03 Python