vue-infinite-loading

在项目中有的时候会使用分页，有的时候会使用下拉加载数据，分页就用element ui的分页就可以了，下拉加载就可以用vue-infinite-loading。

import InfiniteLoading from "vue-infinite-loading";
components: { InfiniteLoading, fileUpload, discernItem, discernSubtitle },<!-- 下拉加载开始 --><infinite-loadingref="infiniteLoading":distance="distance":identifier="infiniteId"@infinite="infiniteHandler"><div slot="spinner">加载中...</div><div slot="no-more">没有更多内容了</div><div slot="no-results">暂无数据</div></infinite-loading><!-- 下拉加载结束 -->

Distance:距离底部多少距离时触发
每当 identifier 属性发生变化的时候，该组件就会自行重设。
@infinite后跟方法
注：方法就是当前的数据列表concat获取到的数据即可
identifier:配合过滤器和选项卡来使用，值发生变化的时候组件会自己重新设置

that.contentlist = that.contentlist.concat(res.data.list);console.log("contentlist------", that.contentlist);that.searchParam.pageindex++;// console.log("根据时间排序后的数组------", that.finalcontextlist);$state.loaded();} else {$state.complete();}}).catch((error) => {$state.complete();});

以下是它的加载信息的插槽

 <div slot="spinner">加载中...</div><div slot="no-more">没有更多内容了</div><div slot="no-results">无内容</div>

identifier的实际应用介绍：
配合select选择器来使用，当发生变化的时候组件会自己重新设置。
可以初始化为：+new data()

flag:+new Date(),)

console.log('this.flag------',this.flag)
console.log('this.flag------',typeof(this.flag))

触发的时候

this.flag+=1

vue-infinite-loading的使用方法相关推荐

Vue自定义Loading动画，自定义全局JS组件Loading动画【记录】
创建 Loading 目录 loading.vue 代码: <template><div class="cus-loading" v-if="flag& ...
【Vue Laravel-mix】Error with Vue lazy loading components: “Failed to resolve async component“
[Vue Laravel-mix] 报错信息: Error with Vue lazy loading components: "Failed to resolve async compon ...
[vue] vue性能的优化的方法有哪些？
[vue] vue性能的优化的方法有哪些? Vue 项目性能优化 - 实践指南(网上最全 / 详细) 前言 Vue 框架通过数据双向绑定和虚拟 DOM 技术,帮我们处理了前端开发中最脏最累的 DOM ...
html绘制叶子形状,css实现叶子形状loading效果的方法
本文实例讲述了css实现叶子形状loading效果的方法.分享给大家供大家参考.具体实现方法如下: 复制代码代码如下: body{ background: #000;} .color1{ backg ...
pHp封装成vue,vue.js生成条形码的方法
本文主要和大家分享vue.js生成条形码的方法,主要以代码的形式和大家分享,希望能帮助到大家. 1.下载插件npm install @xkeshi/vue-barcode //下载条形码插件 2.在m ...
vue如何封装请求接口方法
vue如何封装请求接口方法方法一首先创建一个server.js文件引入axios和qs //引入axios和qs插件 import axios from 'axios' import qs fr ...
Vue2.x源码学习笔记-Vue实例的属性和方法整理
还是先从浏览器直观的感受下实例属性和方法. 实例属性: 对应解释如下: vm._uid // 自增的id vm._isVue // 标示是vue对象,避免被observe vm._renderProx ...
vue中mixins的使用方法和注意地方
一.什么是Mixins? mixins(混入),官方的描述是一种分发 Vue 组件中可复用功能的非常灵活的方式,mixins是一个js对象,它可以包含我们组件中script项中的任意功能选项,如dat ...
vue动态切换css文件_vue实现样式之间的切换及vue动态样式的实现方法
编程之家收集整理的这篇文章主要介绍了vue实现样式之间的切换及vue动态样式的实现方法,编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考. 前言既然我们选择了vue,那么在做东西时就不要想 ...
[vue] 你有使用做过vue与原生app交互吗？说说vue与ap交互的方法
[vue] 你有使用做过vue与原生app交互吗?说说vue与ap交互的方法[vue] 你有使用做过vue与原生app交互吗?说说vue与ap交互的方法我的做法就是让app在webview把app的 ...

vue-infinite-loading的使用方法

vue-infinite-loading

vue-infinite-loading的使用方法相关推荐

最新文章

热门文章