欢迎来到代码驿站!

vue

当前位置:首页 > 网页前端 > vue

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

时间:2021-03-12 09:54:34|栏目:vue|点击:

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

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

使用的是iview中的组件Scroll

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

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

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

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

其中几个问题都解决了:

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

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

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

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

上一篇:浅谈vux之x-input使用以及源码解读

栏    目:vue

下一篇:Vue实现图书管理小案例

本文标题:vue和iview实现Scroll 数据无限滚动功能

本文地址:http://www.codeinn.net/misctech/79198.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有