当前位置: 首页 > news >正文

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框架内使用无缝滚动&#xff0c;使用一个插件比较合适&#xff08;gitee地址&#xff09;&#xff1a; vue3-seamless-scroll: Vue3.0 无缝滚动组件 具体更多配置请看&#xff1a; 组件配置 | vue3-scroll-seamless 1. 安装&#xff1a; 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的相关配置&#xff0c;配置密码和相关算法 3.配置数据源连接 3.1 数据库连接配置 4.连接数据库配置类详解&#xff08;DataSourceConfig&#xff09;。 5.完整的配置类代码如下 1.引入相关的依赖 <dependency><groupId>…...

Python 中将字典内容保存到 Excel 文件使用详解

概要 在数据处理和分析的过程中,经常需要将字典等数据结构保存到Excel文件中,以便于数据的存储、共享和进一步分析。Python提供了丰富的库来实现这一功能,其中最常用的是pandas和openpyxl。本文将详细介绍如何使用这些库将字典内容保存到Excel文件中,并包含具体的示例代码…...

libaom 编码器 aomenc 使用文档介绍

使用方法&#xff1a;./aomenc <选项> -o 目标文件名 源文件名 使用 --help 查看完整的选项列表。 选项&#xff1a; --help 显示使用选项并退出-c <参数>, --cfg<参数> 使用配置文件-D, --debug 调试模式&#xff08;使输出确定性&#xff09;-o <参数&g…...

速盾:cdn 缓存图片

现如今&#xff0c;互联网已经成为我们日常生活中不可或缺的一部分。在我们使用互联网时&#xff0c;经常会遇到图片加载缓慢、文章打开慢等问题。为了解决这些问题&#xff0c;CDN&#xff08;内容分发网络&#xff09;应运而生。CDN 是一种通过将数据缓存在世界各地的服务器上…...

移动应用开发课设——原神小助手文档(2)

2023年末&#xff0c;做的移动应用开发课设&#xff0c;分还算高&#xff0c;项目地址&#xff1a;有帮助的话&#xff0c;点个赞和星呗~ GitHub - blhqwjs/-GenShin_imp: 2023年移动应用开发课设 本文按照毕业论文要求来写&#xff0c;希望对大家有所帮助。 接上文&#xff1a…...

智能聊天机器人:使用PyTorch构建多轮对话系统

使用PyTorch构建多轮对话系统的示例代码。这个示例项目包括一个简单的Seq2Seq模型用于对话生成&#xff0c;并使用GRU作为RNN的变体。以下是代码的主要部分&#xff0c;包括数据预处理、模型定义和训练循环。 数据预处理 首先&#xff0c;准备数据并进行预处理。这部分代码假…...

昇思25天学习打卡营第16天 | 文本解码原理-以MindNLP为例

基于 MindSpore 实现 BERT 对话情绪识别 上几章我们学习过了基于MindSpore来实现计算机视觉的一些应用&#xff0c;那么从这期开始要开始一个新的领域——LLM 首先了解一下什么是LLM LLM 是 “大型语言模型”&#xff08;Large Language Model&#xff09;的缩写。LLM 是一种…...

Unity之Text组件换行\n没有实现+动态中英互换

前因&#xff1a;文本中的换行 \n没有换行而是打印出来了&#xff0c;解决方式 因为unity会默认把\n替换成\\n 面板中使用富文本这个选项啊 没有用 m_text.text m_text.text.Replace("\\n", "\n"); ###动态中英文互译 using System.Collections; using…...

vue3+ el-tree 展开和折叠,默认展开第一项

默认第一项展开: 展开所有项&#xff1a; 折叠所有项&#xff1a; <template><el-treestyle"max-width: 600px":data"treeData"node-key"id":default-expanded-keys"defaultExpandedKey":props"defaultProps"…...

ProFormList --复杂数据联动ProFormDependency

需求&#xff1a; &#xff08;1&#xff09;数据联动&#xff1a;测试数据1、2互相依赖&#xff0c;测试数据1<测试数据2,测试数据2>测试数据1。 &#xff08;2&#xff09;点击添加按钮&#xff0c;添加一行。 &#xff08;3&#xff09;自定义操作按钮。 &#xff0…...

Git、Github、tortoiseGit下载安装调试全套教程

一、Git 1.下载安装Git 编辑器可默认Vim&#xff0c;可换成别的&#xff0c;此处换成VScode&#xff0c;换成VScode或别的都需要单独下载和调用 &#xff08;1&#xff09;Git安装&#xff1a;https://www.cnblogs.com/xiuxingzhe/p/9300905.html 超级完整的 Git的下载、安…...

老师怎么快速发布成绩?

期末考试的钟声刚刚敲响&#xff0c;成绩单的发放却成了老师们的一大难题。每当期末成绩揭晓&#xff0c;老师们便要开始一项繁琐的任务——将每一份成绩单逐一私信给家长。这不仅耗费了大量的时间和精力&#xff0c;也让本就忙碌的期末工作变得更加繁重。然而&#xff0c;随着…...

央视揭露:上百元的AI填报高考志愿真的靠谱吗?阿里云新增两位AI圈“代言人”!|AI日报

文章推荐 MiniMax闫俊杰&#xff1a;国内模型远不及GPT-4&#xff1b;OpenAI隐瞒黑客曾入侵其内部系统&#xff5c;AI日报 今日热点 月之暗面、智联招聘成为阿里云新“代言人”&#xff0c;使用阿里云强大算力和大模型服务平台提升模型推理效率 7月8日&#xff0c;阿里云官…...

TPM管理咨询公司甄选指南

在竞争激烈的市场环境中&#xff0c;TPM&#xff08;全面生产维护&#xff09;管理咨询公司的重要性日益凸显。然而&#xff0c;如何在众多咨询公司中筛选出最适合自己企业的合作伙伴&#xff0c;成为了许多企业决策者面临的难题。本文将从专业度、行业经验、服务质量和性价比等…...

探索 Scikit-Learn:机器学习的强大工具库

Scikit-Learn 探索 Scikit-Learn&#xff1a;机器学习的强大工具库主要功能模块分类&#xff08;Classification&#xff09;回归&#xff08;Regression&#xff09;聚类&#xff08;Clustering&#xff09;降维&#xff08;Dimensionality Reduction&#xff09;模型选择&…...

音视频质量评判标准

一、实时通信延时指标 通过图中表格可以看到&#xff0c;如果端到端延迟在200ms以内&#xff0c;说明整个通话是优质的&#xff0c;通话效果就像大家在同一个房间里聊天一样&#xff1b;300ms以内&#xff0c;大多数人很满意&#xff0c;400ms以内&#xff0c;有小部分人可以感…...

如何在vue3中使用scss

一 要使用scss首先需要下载相关的包 可以在终端使用下面的命令下载相关包 npm install -D sass 二 在src文件下新建一个文件夹叫做styles 在文件夹下创建三个文件 index.scss主要用来引用其他文件 reset.scss用来清除默认的样式 variable.scss用来配置全局属性 三 需要在v…...

Gartner发布采用美国防部模型实施零信任的方法指南:七大支柱落地方法

零信任是网络安全计划的关键要素&#xff0c;但制定策略可能会很困难。安全和风险管理领导者应使用美国国防部模型的七大支柱以及 Gartner 研究来设计零信任策略。 战略规划假设 到 2026 年&#xff0c;10% 的大型企业将拥有全面、成熟且可衡量的零信任计划&#xff0c;而 202…...

[特殊字符] 智能合约中的数据是如何在区块链中保持一致的?

&#x1f9e0; 智能合约中的数据是如何在区块链中保持一致的&#xff1f; 为什么所有区块链节点都能得出相同结果&#xff1f;合约调用这么复杂&#xff0c;状态真能保持一致吗&#xff1f;本篇带你从底层视角理解“状态一致性”的真相。 一、智能合约的数据存储在哪里&#xf…...

多模态商品数据接口:融合图像、语音与文字的下一代商品详情体验

一、多模态商品数据接口的技术架构 &#xff08;一&#xff09;多模态数据融合引擎 跨模态语义对齐 通过Transformer架构实现图像、语音、文字的语义关联。例如&#xff0c;当用户上传一张“蓝色连衣裙”的图片时&#xff0c;接口可自动提取图像中的颜色&#xff08;RGB值&…...

如何为服务器生成TLS证书

TLS&#xff08;Transport Layer Security&#xff09;证书是确保网络通信安全的重要手段&#xff0c;它通过加密技术保护传输的数据不被窃听和篡改。在服务器上配置TLS证书&#xff0c;可以使用户通过HTTPS协议安全地访问您的网站。本文将详细介绍如何在服务器上生成一个TLS证…...

Spring Boot+Neo4j知识图谱实战:3步搭建智能关系网络!

一、引言 在数据驱动的背景下&#xff0c;知识图谱凭借其高效的信息组织能力&#xff0c;正逐步成为各行业应用的关键技术。本文聚焦 Spring Boot与Neo4j图数据库的技术结合&#xff0c;探讨知识图谱开发的实现细节&#xff0c;帮助读者掌握该技术栈在实际项目中的落地方法。 …...

图表类系列各种样式PPT模版分享

图标图表系列PPT模版&#xff0c;柱状图PPT模版&#xff0c;线状图PPT模版&#xff0c;折线图PPT模版&#xff0c;饼状图PPT模版&#xff0c;雷达图PPT模版&#xff0c;树状图PPT模版 图表类系列各种样式PPT模版分享&#xff1a;图表系列PPT模板https://pan.quark.cn/s/20d40aa…...

企业如何增强终端安全?

在数字化转型加速的今天&#xff0c;企业的业务运行越来越依赖于终端设备。从员工的笔记本电脑、智能手机&#xff0c;到工厂里的物联网设备、智能传感器&#xff0c;这些终端构成了企业与外部世界连接的 “神经末梢”。然而&#xff0c;随着远程办公的常态化和设备接入的爆炸式…...

GC1808高性能24位立体声音频ADC芯片解析

1. 芯片概述 GC1808是一款24位立体声音频模数转换器&#xff08;ADC&#xff09;&#xff0c;支持8kHz~96kHz采样率&#xff0c;集成Δ-Σ调制器、数字抗混叠滤波器和高通滤波器&#xff0c;适用于高保真音频采集场景。 2. 核心特性 高精度&#xff1a;24位分辨率&#xff0c…...

基于TurtleBot3在Gazebo地图实现机器人远程控制

1. TurtleBot3环境配置 # 下载TurtleBot3核心包 mkdir -p ~/catkin_ws/src cd ~/catkin_ws/src git clone -b noetic-devel https://github.com/ROBOTIS-GIT/turtlebot3.git git clone -b noetic https://github.com/ROBOTIS-GIT/turtlebot3_msgs.git git clone -b noetic-dev…...

CVE-2020-17519源码分析与漏洞复现(Flink 任意文件读取)

漏洞概览 漏洞名称&#xff1a;Apache Flink REST API 任意文件读取漏洞CVE编号&#xff1a;CVE-2020-17519CVSS评分&#xff1a;7.5影响版本&#xff1a;Apache Flink 1.11.0、1.11.1、1.11.2修复版本&#xff1a;≥ 1.11.3 或 ≥ 1.12.0漏洞类型&#xff1a;路径遍历&#x…...

Mysql8 忘记密码重置,以及问题解决

1.使用免密登录 找到配置MySQL文件&#xff0c;我的文件路径是/etc/mysql/my.cnf&#xff0c;有的人的是/etc/mysql/mysql.cnf 在里最后加入 skip-grant-tables重启MySQL服务 service mysql restartShutting down MySQL… SUCCESS! Starting MySQL… SUCCESS! 重启成功 2.登…...