基于Vue3实现列表虚拟滚动效果

目录
  • 前言
  • 完成效果
  • 思路和需要解决的问题
  • vue3+setup 写的组件
  • 使用组件

前言

近期在做一个网页播放器项目中，用到很多需要展示歌单的列表

一个歌单动辄千百首歌曲，页面中的元素太多导致热重载的时候 chrome 直接崩了

于是无限滚动列表提上日程

写的有点乱，也是第一次用 typescript 写项目，先记录一下

完成效果

思路和需要解决的问题

与懒加载不同，虚拟滚动需要一次性获取所有数据，但是只显示屏幕可见范围内的数据

要做到这些我需要知道：

  • 一行的高度
  • 屏幕范围内能显示的行数
  • 列表在页面中距离网页顶部的位置
  • 滚动条高度

假设满屏能容纳 10 条数据，需要加载的数据是一个数组listData，只需要裁剪数据范围listData.slice(0, 10)

随着滚动条向下，将滚动条高度/一行的高度可以计算出当前行数

而要模拟滚动条高度就要在页面挂载时就手动设置页面的高度一行高度*listData.length

最后也是最关键的是保持列表一直保持在当前位置上，手动设置列表容器padding-top等于当前滚动条高度

有一个仍未解决的问题，就是每次来回滚动歌曲封面都要重新请求

赞 (0)

相关推荐

  • 基于vue.js 2.x的虚拟滚动条的示例代码

    基于vue.js 2.x的虚拟滚动条的示例代码

    前言 记得以前偶然有一次浏览过一个开源的cms项目,发现这个项目的左边的菜单已经超出了windows的宽度,我就好奇为什么没出滚动条呢?然后我仔细一看,发现它左侧有一个小的div,然后我尝试着拖动它,发现竟能和原生的滚动条一样!可以通过查看它的源码,发现了这款滚动条的叫做slimScroll,然后我去它的github仓库 看了下,研究了一下源码,给我的感觉是我也能做出来一样的滚动条!通过vue实现! 设计 好, 现在开始我们的设计滚动条的步骤: 设计滚动条dom 首先要思考的是: 如果要使你需要

  • vue实现列表无缝滚动

    本文实例为大家分享了vue实现列表无缝滚动的具体代码,供大家参考,具体内容如下 HTML部分代码 <template> <div id="box" class="wrapper"> <div class="contain" id="con1" ref="con1" :class="{anim:animate==true}"> <List v-fo

  • vue实现循环滚动列表

    本文实例为大家分享了vue实现循环滚动列表的具体代码,供大家参考,具体内容如下 1.安装 vue-seamless-scroll   实例文档链接 cnpm install vue-seamless-scroll --save 2.文件中引入,组件配置 import vueSeamlessScroll from 'vue-seamless-scroll' 3.使用 <template> <vue-seamless-scroll :data="CardPartsStatistic

  • vue轻松实现虚拟滚动的示例代码

    vue轻松实现虚拟滚动的示例代码

    目录 前言 滚动原理 实现 源代码 参考 前言 移动端网页的日常开发中,偶尔会包含一些渲染长列表的场景.比如某旅游网站需要完全展示出全国的城市列表,再有将所有通讯录的姓名按照A,B,C...首字母依次排序展示. 长列表的数量一般在几百条范围内不会出现意外的效果,浏览器本身足以支撑.可一旦数量级达到上千,页面渲染过程会出现明显的卡顿.数量突破上万甚至十几万时,网页可能直接崩溃了. 为了解决长列表造成的渲染压力,业界出现了相应的应对技术,即长列表的虚拟滚动. 虚拟滚动的本质,不管页面如何滑动,HTM

  • vue实现列表无缝滚动效果

    本文实例为大家分享了vue实现列表无缝滚动效果的具体代码,供大家参考,具体内容如下 1.安装 npm install vue-seamless-scroll --save 2.在需要使用的组件中引入进行配置 import vueSeamlessScroll from "vue-seamless-scroll"; 在components中注入 components: { vueSeamlessScroll }, 3.使用 <template>   <div class=

  • 基于Vue3实现列表虚拟滚动效果

    基于Vue3实现列表虚拟滚动效果

    目录 前言 完成效果 思路和需要解决的问题 vue3+setup 写的组件 使用组件 前言 近期在做一个网页播放器项目中,用到很多需要展示歌单的列表 一个歌单动辄千百首歌曲,页面中的元素太多导致热重载的时候 chrome 直接崩了 于是无限滚动列表提上日程 写的有点乱,也是第一次用 typescript 写项目,先记录一下 完成效果 思路和需要解决的问题 与懒加载不同,虚拟滚动需要一次性获取所有数据,但是只显示屏幕可见范围内的数据 要做到这些我需要知道: 一行的高度 屏幕范围内能显示的行数 列表

  • 基于jQuery实现列表循环滚动小技巧(超简单)

    基于jQuery实现列表循环滚动小技巧(超简单)

    看到一个很好的思路,记录一下 之前使用jQuery做滚动效果,在这两篇文章里有写:文一.文二,分别使用了scrollLeft()与scrollTop().scroll()来实现 后来看到一个demo,觉得思路很妙,想着可以用来做列表内容项的滚动,效果大概是这样的: 思路是这样的: 只要能够不停地把第一个item移动到末尾,其余的自会往上填补空缺,填补的过程用动画放慢些,就能有不断滚动的视觉效果了(数组删了第一个元素,再在末尾加上这个元素,等于把第一个元素移动到末尾:元素总量没有改变,但位置全发生

  • JS实现的新闻列表自动滚动效果示例

    JS实现的新闻列表自动滚动效果示例

    本文实例讲述了JS实现的新闻列表自动滚动效果.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> #box{width:260px;height:100px;margi

  • 基于Vue3实现的图片散落效果实例

    基于Vue3实现的图片散落效果实例

    目录 背景 做啥好呢 出现问题 原理 HTML结构 准备5张图片 创建div 切换背景图片 div存在间隙的问题 代码详情 总结 背景 今天又是美好的摸鱼一天,刚刚进入职场,觉得一切都很新鲜,导师给的任务也不多(要是每天都是这样就好了),于是开始带薪学习. 做啥好呢 没事在网上乱逛的时候,偶然间看到一个动画效果不错,就决定上手做一些,简单的说就是一个完整的图片,在一段时间之后回突然破裂开来,觉得很有意思,就新建了一个文件夹. 出现问题 一下午的摸鱼时光,间公司熙熙攘攘,我在其中却格格不入(太闲了

  • vue中使用vue-seamless-scroll插件实现列表无缝滚动效果

    vue中使用vue-seamless-scroll插件实现列表无缝滚动效果

    需求:使用vue-seamless-scroll插件实现列表无缝滚动,也可以添加相应的点击跳转,点击事件会存在点击失效的问题.支持上下左右无缝滚动,单步滚动停留时间,以及水平方向的手动切换. 效果图: 基于vue的无缝滚动组件 注意:需要给父容器一个height和:data='Array'和overfolw:hidden;左右滚动需要给ul容器一个初始化 css width. 参考配置: 向下滚动 direction:0 向下滚动 direction:1 向左滚动 direction:2 向右滚

  • js实现文字列表无缝滚动效果

    本文实例为大家分享了js文字列表无缝滚动的具体代码,供大家参考,具体内容如下 HTML代码: <div id="rule"> <div class="list" id="list"> <p>用户185****0000 获得XXX优惠券</p> <p>用户185****0000 获得XXX优惠券</p> <p>用户185****0000 获得XXX优惠券</p

  • 基于jquery实现全屏滚动效果

    基于jquery实现全屏滚动效果

    那么今天就来介绍这款fullPage,与fullPage.js是不同的,fullpage兼容性更佳,能向下兼容到IE6, 不依赖任何 js 库,可独立使用.功能上虽然不如 fullPage.js 强大,但一般使用已经足够了,尤其是它的动画效果,你可以自由设定缩放.旋转以产生各种各样的动画效果.同时它还支持 fullPage.js 所没有的水平滚动. 兼容桌面端(ie5.5+) 和 手机端 你可以用它来构建你的个人主页或者网页应用 这是一个不使用jQuery小巧的框架 不到9KB 再介绍之前先看一

  • Android基于reclyview实现列表回弹动画效果

    reclyview实现列表回弹动画效果,供大家参考,具体内容如下 1.reclyview列表布局文件 <com.example.demo1.ReboundLayout         android:id="@+id/view"         android:layout_width="match_parent"         android:layout_height="match_parent"         android:ba

  • 基于javascript实现文字无缝滚动效果

    基于javascript实现文字无缝滚动效果

    本文实例为大家分享了javascript实现文字无缝滚动的全部代码,供大家参考,具体内容如下 效果图: 实现代码: <!DOCTYPE html> <html> <head> <meta charset="gb2312"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> &

随机推荐