虚拟滚动实现(Vue)

欢迎点击: 个人官网博客.

项目列表数据越来越多(上万条)，正常列表可以分页，但是像下拉框之类组件就不能分页。每次都要加载所有的(很慢)，性能不好的浏览器特别卡顿。虚拟滚动的技术完美解决。

主要用于无法使用分页功能的长列表首屏加载速度慢问题，DOM加载过多“无用”元素。

上效果图：

核心：

元素监听scroll事件

计算可视化高度一次能装几个列表，然后从总数据中进行slice截取

每一次滚动后根据scrollTop值获取一个可以整除itemH结果进行偏移

上代码，可直接复制运行

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {padding: 0;margin: 0;list-style: none;box-sizing: border-box;}li {text-align: center;line-height: 60px;border-bottom: 1px solid red;}</style><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.13/vue.min.js"></script>
</head><body><div id="app"><div class="box" :style="`height:${viewH}px;overflow-y:scroll;`" @scroll="handleScroll"><ul><li :style="`transform:translateY(${offsetY}px); height:${itemH}px;`" v-for='i in clist' :key="i">{{i}}</li></ul></div></div><script>let list = []for (let index = 0; index < 10000; index++) {list.push(index)}new Vue({el: '#app',data() {return {list,//上万条总数据clist: [],// 页面展示数据viewH: 500, // 外部box高度itemH: 60, // 单项高度scrollH: '', // 整个滚动列表高度showNum: '',//可视化高度一次能装几个列表offsetY: 0// 动态偏移量}},mounted() {this.scrollH = this.list.length * this.itemH;// 计算可视化高度一次能装几个列表, 多设置几个防止滚动时候直接替换this.showNum = Math.floor(this.viewH / this.itemH) + 4;// 默认展示几个this.clist = this.list.slice(0, this.showNum);this.lastTime = new Date().getTime();},computed: {// clist() { }},methods: {handleScroll(e) {if (new Date().getTime() - this.lastTime > 10) {let scrollTop = e.target.scrollTop; // 滚去的高度// 每一次滚动后根据scrollTop值获取一个可以整除itemH结果进行偏移// 例如: 滚动的scrllTop = 1220  1220 % this.itemH = 20  offsetY = 1200this.offsetY = scrollTop - (scrollTop % this.itemH);//上面卷掉了多少，就要往下平移多少，不然showNum滚出可视区外了console.log(scrollTop, scrollTop % this.itemH);this.clist = this.list.slice(Math.floor(scrollTop / this.itemH),  // 计算卷入了多少条Math.floor(scrollTop / this.itemH) + this.showNum)this.lastTime = new Date().getTime();}}},})</script>
</body></html>

虚拟滚动实现(Vue)相关推荐

vue轻松实现虚拟滚动
前言移动端网页的日常开发中,偶尔会包含一些渲染长列表的场景.比如某旅游网站需要完全展示出全国的城市列表,再有将所有通讯录的姓名按照A,B,C...首字母依次排序展示. 长列表的数量一般在几百条范围内 ...
虚拟滚动列表和css虚拟滚动【有思考】
虚拟滚动列表助力性能优化我所理解的是,虚拟滚动需要一次性获取所有数据,但是只渲染显示屏幕可见范围内的那些. 要做到这些我需要知道: 一行的高度屏幕范围内能显示的行数列表在页面中距离网页顶部的位置 ...
虚拟滚动（Virtual Scrolling）实现
针对大数据列表一般不会一次性加载,会采用上拉加载或者分页的方式展示.如果 10W 条数据,列表对应着 10W 个 DOM 节点,性能方面体验可能会不太好,因此引入虚拟滚动来优化. 虚拟滚动:要渲染完整 ...
Angular实现虚拟滚动多选下拉框笔记
要求: 实现一个angular多选下拉框组件,当有超过2000个选项时,滑动/挑选/全选均不卡. 正篇: 为了方便,这里不考虑扩展性,所以规定下拉框展开只显示7行数据,行高27px 约定:input为 ...
列表如何做，看这一篇就够啦——触底加载、虚拟滚动与计算展现值
我们作为前端,平时遇到的一大类工作就是展现各种的数据,而列表就是其中一个基础而通用的形式,无论是像Google.百度这样的搜索引擎,到像Facebook.Twitter.掘金这样的用户社区,抑或是像美 ...
【React】手写虚拟滚动组件（二）可自动获取不定高度的虚拟滚动组件
前言上次那篇写的虚拟滚动后来使用发现在某些情况并不是特别好用,并且只支持固定高度.我看了下umihook的虚拟滚动,发现也不是很好用,它支持手动设定每个元素高度,但也不能支持不定高度,而且限定更多了 ...
文件异步上传使用虚拟滚动el-table-virtual-scroll加载数据
需求最近在写一个批量导入数据的功能,需要通过上传文件异步导入调接口,将后台返回Excel文件里的数据不做分页用列表展示出来,再加上需要在列表嵌入输入框,所以加载大量数据渲染的时候要加载很久,需要用到 ...
element ui el-carousel 滚动图 vue 基于vue-lazyload图片懒加载、延迟加载解决方案
vue-lazyload插件github地址:https://github.com/hilongjw/vue-lazyload#requirements 效果是默认不加载图片,先用一个占位符图来代替, ...
js数字金额滚动动画(vue)
vue金额滚动动画效果预览 QQ20190124-0.gif <template><div><div class="head" @click=&qu ...

虚拟滚动实现(Vue)

虚拟滚动实现(Vue)相关推荐

最新文章

热门文章