vue3长列表优化,使用vue-virtual-scroller实现直播间弹幕列表虚拟滚动效果

使用的组件库是:https://github.com/Akryum/vue-virtual-scroller 

官方文档:vue-virtual-scroller

安装依赖

npm install --save vue-virtual-scroller@nextpnpm install --save vue-virtual-scroller@nextyarn add vue-virtual-scroller@next

组件导入

在main.ts中导入组件,这个依赖库支持RecycleScroller,DynamicScroller,DynamicScrollerItem三个组件,可以全量导入,也可以部分导入。这三个组件区别是滚动每一项高度是固定的还是动态的,Recycle就是固定的高度,Dynamic是动态的,动态的话,必须要包含DynamicScrollerItem。

import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
import VirtualScroller from 'vue-virtual-scroller'app.use(VirtualScroller)

使用试试

使用固定高度的RecycleScroller组件:

<template><RecycleScrollerclass="scroller":items="list":item-size="32"key-field="id"v-slot="{ item }"><div class="user">{{ item.name }}</div></RecycleScroller>
</template><script>
export default {props: {list: Array,},
}
</script><style scoped>
.scroller {height: 100%;
}.user {height: 32%;padding: 0 12px;display: flex;align-items: center;
}
</style>

使用动态高度的DynamicScroller组件:

注意事项:要结合DynamicScrollerItem一起使用,并且要加上active属性才可以,不然会有警告。

<DynamicScroller:items="messageList":min-item-size="32"class="liveMeg"id="liveMsg"ref="liveMsg"v-if="messageList.length"><template v-slot="{ item, active }"><DynamicScrollerItem:item="item":active="active"class="msgBox":size-dependencies="[item.name, item.msg]":data-index="item.id"><div class="content"><span class="name">{{ item.name }}:</span><span class="msg">{{ item.msg }}</span></div></DynamicScrollerItem></template></DynamicScroller>css样式:
.liveMeg {flex: 1;margin-left: 10px;background-color: #252632;border-radius: 10px;box-shadow: 0 0 10px 2px gray;scrollbar-color: #363741 transparent;scrollbar-width: thin;overflow-y: scroll;.msgBox {display: flex;flex-direction: row;padding: 5px;white-space: wrap;.name {color: #8ce7ff;margin-right: 2px;white-space: nowrap;}.msg {color: white;white-space: wrap;}}}

没使用之前页面会渲染超级多个div元素,但是使用这个虚拟列表之后,就只会渲染在视窗里面的元素:页面中元素数量一直就是这多,超过了就不会渲染出来

自动滚动到底部

想要让消息内容自动滚动到底部,适用于直播间弹幕消息或者聊天消息等结构,可以尝试使用这种方式。但是需要注意:获取DynamicScroller这个组件的时候,要使用document.getElementById('liveMsg')这种形式,不能使用ref这种,因为ref获取到的并不是一个html元素,没有scrollTop方法,所以无法滚动到底部。

// 滚动盒子到底部if (liveMsg.value) {const msgDom: HTMLElement | null = document.getElementById('liveMsg')console.log('liveMsg.value--', msgDom)if (msgDom) {msgDom.scrollTop = msgDom.scrollHeight}}

我这就是在收到message消息的时候就执行这个滚动的方法:

最后实现的抖音直播间的弹幕滚动效果:

开源地址:GitHub - Sjj1024/LiveBox: livebox

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/38159.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

如何用文章改写ai软件进行改写?5个软件教你快速进行修改文章

如何用文章改写ai软件进行改写&#xff1f;5个软件教你快速进行修改文章 使用AI改写软件可以帮助你快速重写文章&#xff0c;使其更加流畅、符合要求或避免重复。以下是五款优质的AI改写软件&#xff0c;它们能够帮助你快速进行文章修改&#xff1a; 聪明灵犀 这是一款非常简…

数据结构_1.0

一、数据结构概述 1.1 概念 在计算机科学中&#xff0c;数据结构是一种数据组织、管理和存储的格式 。它是相互之间存在一种或多种特定关系的数据元素的集合。通常情况下&#xff0c;精心选择的数据结构可以带来更高的运行或者存储效率。数据结构往往同高效的检索算法和索引技…

【开源合规】开源许可证基础知识与风险场景引入

文章目录 什么是开源许可证(License)?开源许可证有什么用?开源许可证分类开源许可证分类及描述公共代码 (Public Domain)CC0无License宽松型许可证 (Permissive)MITApache 2.0BSD弱互惠型许可证 (Weak Copyleft)LGPLMPLEPL互惠型许可证 (Reciprocal)GPLEUPL强互惠许可证 (Str…

读-改-写操作

1 什么是读-改-写操作 “读-改-写”&#xff08;Read-Modify-Write&#xff0c;简称RMW&#xff09;是一种常见的操作模式&#xff0c;它通常用于需要更新数据的场景。 这个模式包含三个基本步骤&#xff1a; 1.读&#xff08;Read&#xff09;&#xff1a;首先读取当前的数据…

从0开始学习pyspark--pyspark的数据分析方式[第2节]

PySpark是Apache Spark的Python API&#xff0c;能够在分布式计算环境中处理大规模数据。本文将详细介绍PySpark中不同的数据分析方式&#xff0c;包括它们的使用场景、操作解释以及示例代码。 1. RDD&#xff08;Resilient Distributed Dataset&#xff09;API 概述 RDD是Sp…

Linux——查找文件-find(详细)

查找文件-find 作用 - 按照文件名、大小、时间、权限、类型、所属者、所属组来搜索文件 格式 find 查找路径 查找条件 具体条件 操作 注意 - find命令默认的操作是print输出 - find是检索文件的&#xff0c;grep是过滤文件中字符串 参数 参数 …

简述Vue中的数据双向绑定原理

Vue中的数据双向绑定原理是Vue框架的核心特性之一&#xff0c;它通过数据劫持结合发布者-订阅者模式来实现。下面将详细阐述Vue中数据双向绑定的原理&#xff0c;并尽量按照清晰的结构进行归纳&#xff1a; 一、数据劫持 使用Object.defineProperty()&#xff1a; Vue在组件…

Mojo模板引擎:释放Web开发的无限潜能

&#x1f680; Mojo模板引擎&#xff1a;释放Web开发的无限潜能 Mojolicious是一个基于Perl的现代化、高性能的Web开发框架&#xff0c;它内置了一个功能强大的模板引擎&#xff0c;专门用于快速构建Web应用程序。Mojo的模板引擎不仅简洁易用&#xff0c;而且具备多种高级特性…

《每天5分钟用Flask搭建一个管理系统》第11章:测试与部署

第11章&#xff1a;测试与部署 11.1 测试的重要性 测试是确保应用质量和可靠性的关键步骤。它帮助开发者发现和修复错误&#xff0c;验证功能按预期工作。 11.2 Flask测试客户端的使用 Flask提供了一个测试客户端&#xff0c;可以在开发过程中模拟请求并测试应用的响应。 …

Unity海面效果——4、法线贴图和高光

Unity引擎制作海面效果 大家好&#xff0c;我是阿赵。 继续做海面效果&#xff0c;上次做完了漫反射颜色和水波动画&#xff0c;这次来做法线和高光效果。 一、 高光的计算 之前介绍过高光的光照模型做法&#xff0c;比较常用的是Blinn-Phong 所以我这里也稍微连线实现了一下 …

在线医疗诊断平台开发教程大纲 (Java 后端,Vue 前端)—实践篇-01

项目分析 第一部分:项目概述及技术选型 项目背景: 在线医疗诊断平台的市场需求与发展趋势本平台的目标用户和核心功能,突出解决的痛点竞品分析,差异化优势技术选型: 后端: 核心框架: Spring Boot (简化开发流程)持久层框架: MyBatis (灵活,易于上手)数据库: MySQL (成熟稳…

API 授权最佳实践

API&#xff08;应用程序编程接口&#xff09;就像秘密之门&#xff0c;允许不同的软件程序进行通信。但并不是每个人都应该拥有每扇门的钥匙&#xff0c;就像不是每个软件都应该不受限制地访问每个 API 一样。 这些 API 将从银行的移动应用程序到您最喜欢的社交媒体平台的所有…

英语中Would you和Could you的区分用法

Spark: 在英语中&#xff0c;“Would you”和“Could you”都是用来礼貌地提出请求或询问的表达方式&#xff0c;但它们之间存在一定的差异&#xff1a; 语气与礼貌程度&#xff1a; Would you&#xff1a;通常用于更正式或较为礼貌的场合&#xff0c;它体现了一种比较客气的请…

打开wsl显示请启用虚拟机平台 Windows 功能并确保在 BIOS 中启用虚拟化。

安装了个安卓模拟器&#xff0c;后面wsl打开后显示这个 按照很多博客说的运行一串命令 bcdedit /set hypervisorlaunchtype auto 之后重启电脑 没有效果 运行 dism.exe /online /enable-feature /featurename:VirtualMachinePlatform /all /norestart 之后重启成功打开 wsl 来…

某智能装备公司如何实现多个工程师共用1台图形工作站

在当今快速发展的科技领域&#xff0c;资源共享和高效利用已成为企业提升竞争力的关键&#xff0c;特别是在工程设计和研发领域。如何最大化地利用有限的资源&#xff0c;如工作站&#xff0c;成为了许多公司面临的挑战。某智能装备公司便是在这样的背景下&#xff0c;通过云飞…

【自动驾驶汽车通讯协议】深入理解PCI Express(PCIe)技术

文章目录 0. 前言1. PCIe简介1.1 PCIe外观1.2 PCIe的技术迭代 2. PCIe的通道&#xff08;lane&#xff09;配置2.1 通道配置详解2.2 通道配置的影响 3. PCIe的架构3.1 架构层次3.2 核心组件 4. PCIe的特性5. PCIe在自动驾驶中的应用 0. 前言 按照国际惯例&#xff0c;首先声明&…

C# --- 如何在代码中开启进程

C# --- 使用代码开启一个进程 方法一 using (Process myProcess new Process()) {myProcess.StartInfo.UseShellExecute false;// You can start any process, HelloWorld is a do-nothing example.myProcess.StartInfo.FileName "C:\\HelloWorld.exe";myProcess…

unity canvas显示相机照射画面的方法

1. 使用 Image 组件显示处理后的图像 如果你的图像数据已经是一个 Texture2D 或 Sprite,你可以将它直接显示在Canvas上的 Image 组件中: 创建 Sprite: 将你的 Texture2D 数据转换为 Sprite,以便可以在 Image 组件中使用。public Sprite CreateSpriteFromTexture(Texture2D…

【产品运营】Saas的核心六大数据

国内头部软件公司的一季度表现惨不忍睹&#xff0c;为啥美国的还那么赚钱呢&#xff1f;其实核心是&#xff0c;没几个Saas产品经理是看数据的&#xff0c;也不知道看啥数据。 SaaS 行业&#xff0c;天天抛头露面、名头叫的响的 SaaS 产品&#xff0c;真没有几个赚钱的。 那为…

电子看板,帮助工厂实现数字化管理

在数字化浪潮的推动下&#xff0c;制造业正经历着深刻的变革&#xff0c;数字工厂成为了行业发展的新趋势。而生产管理看板作为一种重要的管理工具&#xff0c;在提升数字工厂管理效率方面发挥着关键作用。 生产管理看板通过实时数据的展示&#xff0c;为数字工厂提供了清晰的全…