vue3实现无缝滚动 列表滚动 vue3-seamlessscroll
vue3框架内使用无缝滚动,使用一个插件比较合适(gitee地址):
vue3-seamless-scroll: Vue3.0 无缝滚动组件
具体更多配置请看:
组件配置 | vue3-scroll-seamless

1. 安装:
npm install vue3-seamless-scroll --save
2. 使用:
我这里使用组件内引入:
//<script setup> 中组件引入
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';// template中使用组件// 注意:父级元素的大小和overflow: hidden是必须添加的
<div style="width: 500px; height: 400px; overflow: hidden;"><Vue3SeamlessScrollref="cScroll":list="list":limit-scroll-num="10"><ul><li></li></ul></Vue3SeamlessScroll>
</div>// 以上参数说明// list 就是我们需要滚动的数据,是一个数组。
// limit-scroll-num 就是数据长度大于这个数字,才能滚动
3.重置
通常情况下需要配合后台接口数据,使用滚动,滚动之后需要重置插件。
//********** 获取后台数据// 定义列表数据
const list = ref([]);// 定义滚动组件 就是我们上边在dom上定义的ref
const cScroll = ref();
getListData().then(res => {if (res.code == 200) {list.value = res.data ? res.data : [];// 重置组件nextTick(() => {// 注意这个重置方法是大写的R -> Reset,而不是小写的reset();// 很多教程写错了,这里就会报错cScroll.value.Reset();})}
})
4.内容高度超出才滚动
还有个需求是滚动内容全部都是文字,当文字超出才滚动,不超出不滚动。
// 1. 首先设置滚动数字为2
/*默认数据长度2,也就是说list的长度为2才会滚动,也就是默认不滚动。如果我们判断内容的高度大于容器的高度,我们会把这个值设置为1,也就可以滚动了
*/// 默认数字
const defaultLimitNum = ref(2);// 2. 然后获取文字容器的高度// 定义滚动组件 就是我们上边在dom上定义的ref
const cScroll = ref();
nextTick(() => {const scrollHeight = cScroll.value.scrollHeight;// 这里判断 大于容器高度,就可以设置为1,让他滚动// 假设容器高度为500pxdefaultLimitNum.value = scrollHeight > 500 ? 1 : 2;// 重置组件CScroll.value.Reset();})
最后,需要注意以下几点:
1. 父元素的“overflow:hidden”必须设置,不设置没有效果;
2. 每次更换数据,最好重置滚动组件(Reset);
相关文章:
vue3实现无缝滚动 列表滚动 vue3-seamlessscroll
vue3框架内使用无缝滚动,使用一个插件比较合适(gitee地址): vue3-seamless-scroll: Vue3.0 无缝滚动组件 具体更多配置请看: 组件配置 | vue3-scroll-seamless 1. 安装: npm install vue3-seamless-sc…...
Python酷库之旅-第三方库Pandas(012)
目录 一、用法精讲 28、pandas.HDFStore.keys函数 28-1、语法 28-2、参数 28-3、功能 28-4、返回值 28-5、说明 28-6、用法 28-6-1、数据准备 28-6-2、代码示例 28-6-3、结果输出 29、pandas.HDFStore.groups函数 29-1、语法 29-2、参数 29-3、功能 29-4、返回…...
SpringCloud集成nacos之jasypt配置中心的密码加密的自动解密
目录 1.引入相关的依赖 2.nacos的yaml的相关配置,配置密码和相关算法 3.配置数据源连接 3.1 数据库连接配置 4.连接数据库配置类详解(DataSourceConfig)。 5.完整的配置类代码如下 1.引入相关的依赖 <dependency><groupId>…...
Python 中将字典内容保存到 Excel 文件使用详解
概要 在数据处理和分析的过程中,经常需要将字典等数据结构保存到Excel文件中,以便于数据的存储、共享和进一步分析。Python提供了丰富的库来实现这一功能,其中最常用的是pandas和openpyxl。本文将详细介绍如何使用这些库将字典内容保存到Excel文件中,并包含具体的示例代码…...
libaom 编码器 aomenc 使用文档介绍
使用方法:./aomenc <选项> -o 目标文件名 源文件名 使用 --help 查看完整的选项列表。 选项: --help 显示使用选项并退出-c <参数>, --cfg<参数> 使用配置文件-D, --debug 调试模式(使输出确定性)-o <参数&g…...
速盾:cdn 缓存图片
现如今,互联网已经成为我们日常生活中不可或缺的一部分。在我们使用互联网时,经常会遇到图片加载缓慢、文章打开慢等问题。为了解决这些问题,CDN(内容分发网络)应运而生。CDN 是一种通过将数据缓存在世界各地的服务器上…...
移动应用开发课设——原神小助手文档(2)
2023年末,做的移动应用开发课设,分还算高,项目地址:有帮助的话,点个赞和星呗~ GitHub - blhqwjs/-GenShin_imp: 2023年移动应用开发课设 本文按照毕业论文要求来写,希望对大家有所帮助。 接上文:…...
智能聊天机器人:使用PyTorch构建多轮对话系统
使用PyTorch构建多轮对话系统的示例代码。这个示例项目包括一个简单的Seq2Seq模型用于对话生成,并使用GRU作为RNN的变体。以下是代码的主要部分,包括数据预处理、模型定义和训练循环。 数据预处理 首先,准备数据并进行预处理。这部分代码假…...
昇思25天学习打卡营第16天 | 文本解码原理-以MindNLP为例
基于 MindSpore 实现 BERT 对话情绪识别 上几章我们学习过了基于MindSpore来实现计算机视觉的一些应用,那么从这期开始要开始一个新的领域——LLM 首先了解一下什么是LLM LLM 是 “大型语言模型”(Large Language Model)的缩写。LLM 是一种…...
Unity之Text组件换行\n没有实现+动态中英互换
前因:文本中的换行 \n没有换行而是打印出来了,解决方式 因为unity会默认把\n替换成\\n 面板中使用富文本这个选项啊 没有用 m_text.text m_text.text.Replace("\\n", "\n"); ###动态中英文互译 using System.Collections; using…...
vue3+ el-tree 展开和折叠,默认展开第一项
默认第一项展开: 展开所有项: 折叠所有项: <template><el-treestyle"max-width: 600px":data"treeData"node-key"id":default-expanded-keys"defaultExpandedKey":props"defaultProps"…...
ProFormList --复杂数据联动ProFormDependency
需求: (1)数据联动:测试数据1、2互相依赖,测试数据1<测试数据2,测试数据2>测试数据1。 (2)点击添加按钮,添加一行。 (3)自定义操作按钮。 ࿰…...
Git、Github、tortoiseGit下载安装调试全套教程
一、Git 1.下载安装Git 编辑器可默认Vim,可换成别的,此处换成VScode,换成VScode或别的都需要单独下载和调用 (1)Git安装:https://www.cnblogs.com/xiuxingzhe/p/9300905.html 超级完整的 Git的下载、安…...
老师怎么快速发布成绩?
期末考试的钟声刚刚敲响,成绩单的发放却成了老师们的一大难题。每当期末成绩揭晓,老师们便要开始一项繁琐的任务——将每一份成绩单逐一私信给家长。这不仅耗费了大量的时间和精力,也让本就忙碌的期末工作变得更加繁重。然而,随着…...
央视揭露:上百元的AI填报高考志愿真的靠谱吗?阿里云新增两位AI圈“代言人”!|AI日报
文章推荐 MiniMax闫俊杰:国内模型远不及GPT-4;OpenAI隐瞒黑客曾入侵其内部系统|AI日报 今日热点 月之暗面、智联招聘成为阿里云新“代言人”,使用阿里云强大算力和大模型服务平台提升模型推理效率 7月8日,阿里云官…...
TPM管理咨询公司甄选指南
在竞争激烈的市场环境中,TPM(全面生产维护)管理咨询公司的重要性日益凸显。然而,如何在众多咨询公司中筛选出最适合自己企业的合作伙伴,成为了许多企业决策者面临的难题。本文将从专业度、行业经验、服务质量和性价比等…...
探索 Scikit-Learn:机器学习的强大工具库
Scikit-Learn 探索 Scikit-Learn:机器学习的强大工具库主要功能模块分类(Classification)回归(Regression)聚类(Clustering)降维(Dimensionality Reduction)模型选择&…...
音视频质量评判标准
一、实时通信延时指标 通过图中表格可以看到,如果端到端延迟在200ms以内,说明整个通话是优质的,通话效果就像大家在同一个房间里聊天一样;300ms以内,大多数人很满意,400ms以内,有小部分人可以感…...
如何在vue3中使用scss
一 要使用scss首先需要下载相关的包 可以在终端使用下面的命令下载相关包 npm install -D sass 二 在src文件下新建一个文件夹叫做styles 在文件夹下创建三个文件 index.scss主要用来引用其他文件 reset.scss用来清除默认的样式 variable.scss用来配置全局属性 三 需要在v…...
Gartner发布采用美国防部模型实施零信任的方法指南:七大支柱落地方法
零信任是网络安全计划的关键要素,但制定策略可能会很困难。安全和风险管理领导者应使用美国国防部模型的七大支柱以及 Gartner 研究来设计零信任策略。 战略规划假设 到 2026 年,10% 的大型企业将拥有全面、成熟且可衡量的零信任计划,而 202…...
java_网络服务相关_gateway_nacos_feign区别联系
1. spring-cloud-starter-gateway 作用:作为微服务架构的网关,统一入口,处理所有外部请求。 核心能力: 路由转发(基于路径、服务名等)过滤器(鉴权、限流、日志、Header 处理)支持负…...
Xshell远程连接Kali(默认 | 私钥)Note版
前言:xshell远程连接,私钥连接和常规默认连接 任务一 开启ssh服务 service ssh status //查看ssh服务状态 service ssh start //开启ssh服务 update-rc.d ssh enable //开启自启动ssh服务 任务二 修改配置文件 vi /etc/ssh/ssh_config //第一…...
Frozen-Flask :将 Flask 应用“冻结”为静态文件
Frozen-Flask 是一个用于将 Flask 应用“冻结”为静态文件的 Python 扩展。它的核心用途是:将一个 Flask Web 应用生成成纯静态 HTML 文件,从而可以部署到静态网站托管服务上,如 GitHub Pages、Netlify 或任何支持静态文件的网站服务器。 &am…...
自然语言处理——Transformer
自然语言处理——Transformer 自注意力机制多头注意力机制Transformer 虽然循环神经网络可以对具有序列特性的数据非常有效,它能挖掘数据中的时序信息以及语义信息,但是它有一个很大的缺陷——很难并行化。 我们可以考虑用CNN来替代RNN,但是…...
C++.OpenGL (14/64)多光源(Multiple Lights)
多光源(Multiple Lights) 多光源渲染技术概览 #mermaid-svg-3L5e5gGn76TNh7Lq {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-3L5e5gGn76TNh7Lq .error-icon{fill:#552222;}#mermaid-svg-3L5e5gGn76TNh7Lq .erro…...
Android写一个捕获全局异常的工具类
项目开发和实际运行过程中难免会遇到异常发生,系统提供了一个可以捕获全局异常的工具Uncaughtexceptionhandler,它是Thread的子类(就是package java.lang;里线程的Thread)。本文将利用它将设备信息、报错信息以及错误的发生时间都…...
LUA+Reids实现库存秒杀预扣减 记录流水 以及自己的思考
目录 lua脚本 记录流水 记录流水的作用 流水什么时候删除 我们在做库存扣减的时候,显示基于Lua脚本和Redis实现的预扣减 这样可以在秒杀扣减的时候保证操作的原子性和高效性 lua脚本 // ... 已有代码 ...Overridepublic InventoryResponse decrease(Inventor…...
spring boot使用HttpServletResponse实现sse后端流式输出消息
1.以前只是看过SSE的相关文章,没有具体实践,这次接入AI大模型使用到了流式输出,涉及到给前端流式返回,所以记录一下。 2.resp要设置为text/event-stream resp.setContentType("text/event-stream"); resp.setCharacter…...
接口 RESTful 中的超媒体:REST 架构的灵魂驱动
在 RESTful 架构中,** 超媒体(Hypermedia)** 是一个核心概念,它体现了 REST 的 “表述性状态转移(Representational State Transfer)” 的本质,也是区分 “真 RESTful API” 与 “伪 RESTful AP…...
6.9本日总结
一、英语 复习默写list11list18,订正07年第3篇阅读 二、数学 学习线代第一讲,写15讲课后题 三、408 学习计组第二章,写计组习题 四、总结 明天结束线代第一章和计组第二章 五、明日计划 英语:复习l默写sit12list17&#…...
