vue 一直加载_Vue无限加载vue-infinite-loading使用详解

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

如何安装

npm install vue-infinite-loading --save

导入方式

import InfiniteLoading from 'vue-infinite-loading';

export default {

mounted() {

components: {

InfiniteLoading,//直接在组件中声明

methods: {

infiniteHandler($state) {

console.log("触发")

setTimeout(() => {

const temp = [];

if(this.list.length>80){

$state.complete();

return;

}

for (let i = this.list.length + 1; i <= this.list.length + 10; i++) {

temp.push(i);

}

this.list = this.list.concat(temp);

$state.loaded();

}, 1000);

data() {

return {

distance:100,//临界值，距离底部多少距离时触发函数 infiniteHandler

list: [1,2,3,4,5,6,7,8,9,0],//测试数据

}

模板使用

小弟拼命加载中...

//加载中的文字

已加载完毕!

//加载完毕的文字

暂无数据:(

//没有数据的文字

加载动画

bubbles

circles

default

spiral

waveDots

vue 一直加载_Vue无限加载vue-infinite-loading使用详解相关推荐

vue ajax拦截器,Vue-resource拦截器判断token失效跳转详解
本文主要为大家带来一篇Vue-resource拦截器判断token失效跳转的实例.小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧,希望能帮助到大家. 在拦截器中设置全局的 ...
Vue 下拉刷新及无限加载组件 - 有你便是晴天 - 博客园
原文 https://github.com/wangdahoo/vue-scroller 主题 Vue.js Vue Scroller Vue Scroller is a foundational ...
linux直接运行程序加载动态库失败,扣丁学堂Linux培训详解程序运行时加载动态库失败解决方法...
今天扣丁学堂Linux培训老师给大家介绍一下关于Linux程序运行时加载动态库失败的解决方法,希望对同学们学习有所帮助,下面我们一起来看一下吧. Linux下不能加载动态库问题当出现下边异常情况 . ...
vue 监控元素宽度_Vue入门系列之Vue实例详解与生命周期
Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成.编译.挂着. ...
vue 查看变量类型_Vue学习开始走向VUE开发2---插值使用详解
插值是在Vue使用中最常见和最简单的一个用法,使用两层嵌套的大括号({{变量}})表示大括号中的内容将会被替换为变量表示的值,主要是用来表示文本的内容. Vue的实现过程中将会跟踪这个变量值的变化,当 ...
vue中点击事件的写法_vue实现绑定事件的方法实例代码详解
一.前言 vuejs中的事件绑定,使用来完成的,这里函数名是定义在Vue实例中的methods对象中的,Vue实例可以直接访问其中的方法. 二.事件绑定方式 1. 直接在标签中写js方法执行方法的第 ...
vue.js根据数据循环生成表格_vue.js循环for（列表渲染）详解
vue.js循环for(列表渲染)详解一.总结一句话总结: v-for {{ item.message }} var example1 = new Vue({ el: '#example-1', ...
aspx网页背景图片设置代码_Vue+CSS3制作双螺旋DNA动画：代码详解和基础知识复习
1 效果: 2 知识点: ======= 2.1 html的基础知识. 2.2 css3的基础知识. 2.3 vue的基础知识. 2.4 代码讲解非常清楚,小白看了都会. 3 html骨架: ==== ...
unity 3d shaderlab 开发实战详解_vue实战开发011:使用router-view嵌套路由详解
前面已经把首页的顶部header和底部的footer页面写完,现在开始写内容区域了,在写内容之前我们先要将路由配置好,不然无法在页面上查看效果,所以这里我在components目录下先建了一个home ...

vue 一直加载_Vue无限加载vue-infinite-loading使用详解

vue 一直加载_Vue无限加载vue-infinite-loading使用详解相关推荐

最新文章

热门文章