vue和iview实现Scroll 数据无限滚动功能


Posted in Javascript onOctober 31, 2019

在做项目的时候因为数据比较多,一次性全部渲染的话会花费较多的时间,所以,想到每一次渲染10条数据

也想过每一次获取十条数据然后显示就行了,就目前自己所知最好的方法是修改接口,一次返回10条,可是这样子太麻烦了,所以决定一次性请求所有数据,然后每次渲染十条,需要再上拉加载更多

使用的是iview中的组件Scroll

以下是获取数据和封装数据的方法:

vue和iview实现Scroll 数据无限滚动功能

原理是先定义两个全局的变量,一个存储全部的数据,一个存储渲染的数据

在首次获得数据的时候,往渲染的变量中存入全部数据的前十条:

vue和iview实现Scroll 数据无限滚动功能

然后在数据最底时上拉加载新的十条数据:

vue和iview实现Scroll 数据无限滚动功能

其中几个问题都解决了:

1. 当数据小于十条时,如何显示

2. 当数据渲染完成,不再渲染数据

3. Scroll的高度,因为是固定值,会在挂载后获取整个屏幕的高度,根据自己的需求,对中间的scroll的高度进行计算和设置

以上基本实现了整个功能,或许还有些问题没有发现,如果发现了新问题会添加进来

以上这篇vue和iview实现Scroll 数据无限滚动功能就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery列表拖动排列具体实现
Nov 04 Javascript
可自定义速度的js图片无缝滚动示例分享
Jan 20 Javascript
jQuery过滤选择器:not()方法使用介绍
Apr 20 Javascript
异步JavaScript编程中的Promise使用方法
Jul 28 Javascript
jQuery实现仿QQ头像闪烁效果的文字闪动提示代码
Nov 03 Javascript
简单的JS轮播图代码
Jul 18 Javascript
如何判断出一个js对象是否一个dom对象
Nov 24 Javascript
浅析javascript中的Event事件
Dec 09 Javascript
Vue.js结合bootstrap实现分页控件
Mar 10 Javascript
node.js基于socket.io快速实现一个实时通讯应用
Apr 23 Javascript
一文了解Vue中的nextTick
May 06 Javascript
VUE.CLI4.0配置多页面入口的实现
Nov 25 Javascript
vue 使用鼠标滚动加载数据的例子
Oct 31 #Javascript
axios 实现post请求时把对象obj数据转为formdata
Oct 31 #Javascript
Javascript和jquery在selenium的使用过程
Oct 31 #jQuery
使用axios发送post请求,将JSON数据改为form类型的示例
Oct 31 #Javascript
vue封装可复用组件confirm,并绑定在vue原型上的示例
Oct 31 #Javascript
关于vue表单提交防双/多击的例子
Oct 31 #Javascript
Vuex的实战使用详解
Oct 31 #Javascript
You might like
PHP UTF8编码内的繁简转换类
2009/07/20 PHP
php如何解决无法上传大于8M的文件问题
2014/03/10 PHP
php 魔术方法详解
2014/11/11 PHP
php的4种常用运行方式详解
2016/12/22 PHP
详解PHP中的序列化、反序列化操作
2017/03/21 PHP
PHP使用PDO调用mssql存储过程的方法示例
2017/10/07 PHP
弹出层之1:JQuery.Boxy (一) 使用介绍
2011/10/06 Javascript
json的前台操作和后台操作实现代码
2012/01/20 Javascript
用jQuery获取IE9下拉框默认值问题探讨
2013/07/22 Javascript
js中split函数的使用方法说明
2013/12/26 Javascript
当某个文本框成为焦点时即清除文本框内容
2014/04/28 Javascript
JQuery打造省市下拉框联动效果
2014/05/18 Javascript
理运用命名空间让js不产生冲突避免全局变量的泛滥
2014/06/15 Javascript
node.js下LDAP查询实例分享
2015/09/30 Javascript
knockoutjs动态加载外部的file作为component中的template数据源的实现方法
2016/09/01 Javascript
简单实现jQuery多选框功能
2017/01/09 Javascript
vue中render函数的使用详解
2018/10/12 Javascript
React Native中ScrollView组件轮播图与ListView渲染列表组件用法实例分析
2020/01/06 Javascript
[40:50]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第四场
2014/05/24 DOTA
[40:01]OG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
使用Python判断IP地址合法性的方法实例
2014/03/13 Python
Python网络爬虫实例讲解
2016/04/28 Python
Django学习笔记之ORM基础教程
2018/03/27 Python
Python简单生成随机数的方法示例
2018/03/31 Python
基于python 二维数组及画图的实例详解
2018/04/03 Python
Python3对称加密算法AES、DES3实例详解
2018/12/06 Python
PyQt5-QDateEdit的简单使用操作
2020/07/12 Python
C#公司笔试题
2014/03/28 面试题
资金主管岗位职责范本
2014/03/04 职场文书
老公给老婆的保证书
2014/04/28 职场文书
高中教师考核方案
2014/05/18 职场文书
商场周年庆活动方案
2014/08/19 职场文书
学校领导班子四风问题整改意见
2014/10/02 职场文书
世界环境日活动总结
2015/02/11 职场文书
《1942》观后感
2015/06/08 职场文书
Python实现PIL图像处理库绘制国际象棋棋盘
2021/07/16 Python