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 相关文章推荐
js实现点击注册按钮开始读秒倒计时的小例子
May 11 Javascript
IE与FireFox的JavaScript兼容问题解决办法
Dec 31 Javascript
javascript使用正则控制input输入框允许输入的值方法大全
Jun 19 Javascript
node.js中的fs.appendFileSync方法使用说明
Dec 17 Javascript
javascript实现简单的二级联动
Mar 19 Javascript
jQuery实现模仿微博下拉滚动条加载数据效果
Dec 25 Javascript
javascript合并表格单元格实例代码
Jan 03 Javascript
详谈jQuery中的一些正则匹配表达式
Mar 08 Javascript
微信小程序实现移动端滑动分页效果(ajax)
Jun 13 Javascript
React如何将组件渲染到指定DOM节点详解
Sep 08 Javascript
支付宝小程序自定义弹窗dialog插件的实现代码
Nov 30 Javascript
Vue中computed、methods与watch的区别总结
Apr 10 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单例模式
2014/11/25 PHP
js判断当页面无法回退时关闭网页否则就history.go(-1)
2014/08/07 Javascript
javascript中clipboardData对象用法详解
2015/05/13 Javascript
JavaScript实现标题栏文字轮播效果代码
2015/10/24 Javascript
深入理解js中this的用法
2016/05/28 Javascript
AngularJS基础 ng-model 指令详解及示例代码
2016/08/02 Javascript
javascript 解决浏览器不支持的问题
2016/09/24 Javascript
Bootstrap基本组件学习笔记之下拉菜单(7)
2016/12/07 Javascript
vue.js选中动态绑定的radio的指定项
2017/06/02 Javascript
jQuery Json数据格式排版高亮插件json-viewer.js使用方法详解
2017/06/12 jQuery
详解Angular-cli生成组件修改css成less或sass的实例
2017/07/27 Javascript
Vue.js实现网格列表布局转换方法
2017/08/25 Javascript
JavaScript实现微信红包算法及问题解决方法
2018/04/26 Javascript
jQuery实现简单复制json对象和json对象集合操作示例
2018/07/09 jQuery
javascript中的数据类型检测方法详解
2019/08/07 Javascript
JS Ajax请求会话过期处理问题解决方法分析
2019/11/16 Javascript
微信小程序实现搜索功能
2020/03/10 Javascript
vue样式穿透 ::v-deep的具体使用
2020/06/04 Javascript
python操作CouchDB的方法
2014/10/08 Python
学习python之编写简单乘法口诀表实现代码
2016/02/27 Python
Python MySQL数据库连接池组件pymysqlpool详解
2017/07/07 Python
Django框架使用mysql视图操作示例
2019/05/15 Python
Python paramiko模块使用解析(实现ssh)
2019/08/30 Python
python3 写一个WAV音频文件播放器的代码
2019/09/27 Python
django框架auth模块用法实例详解
2019/12/10 Python
Python爬虫之Spider类用法简单介绍
2020/08/04 Python
微软英国官方网站:Microsoft英国
2016/10/15 全球购物
塔吉特百货公司官网:Target
2017/04/27 全球购物
BRASTY捷克:购买香水、化妆品、手袋和手表
2017/07/12 全球购物
业务助理岗位职责
2013/11/18 职场文书
新领导上任欢迎词
2014/01/13 职场文书
应届毕业生求职信范文
2014/05/08 职场文书
2015年世界艾滋病日活动总结
2015/03/24 职场文书
货款欠条范本
2015/07/03 职场文书
证婚人婚礼致辞
2015/07/28 职场文书
MySQL一些常用高级SQL语句
2021/07/03 MySQL