当前位置: 首页 > 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…...

【项目实战】通过多模态+LangGraph实现PPT生成助手

PPT自动生成系统 基于LangGraph的PPT自动生成系统&#xff0c;可以将Markdown文档自动转换为PPT演示文稿。 功能特点 Markdown解析&#xff1a;自动解析Markdown文档结构PPT模板分析&#xff1a;分析PPT模板的布局和风格智能布局决策&#xff1a;匹配内容与合适的PPT布局自动…...

江苏艾立泰跨国资源接力:废料变黄金的绿色供应链革命

在华东塑料包装行业面临限塑令深度调整的背景下&#xff0c;江苏艾立泰以一场跨国资源接力的创新实践&#xff0c;重新定义了绿色供应链的边界。 跨国回收网络&#xff1a;废料变黄金的全球棋局 艾立泰在欧洲、东南亚建立再生塑料回收点&#xff0c;将海外废弃包装箱通过标准…...

零基础在实践中学习网络安全-皮卡丘靶场(第九期-Unsafe Fileupload模块)(yakit方式)

本期内容并不是很难&#xff0c;相信大家会学的很愉快&#xff0c;当然对于有后端基础的朋友来说&#xff0c;本期内容更加容易了解&#xff0c;当然没有基础的也别担心&#xff0c;本期内容会详细解释有关内容 本期用到的软件&#xff1a;yakit&#xff08;因为经过之前好多期…...

如何在网页里填写 PDF 表格?

有时候&#xff0c;你可能希望用户能在你的网站上填写 PDF 表单。然而&#xff0c;这件事并不简单&#xff0c;因为 PDF 并不是一种原生的网页格式。虽然浏览器可以显示 PDF 文件&#xff0c;但原生并不支持编辑或填写它们。更糟的是&#xff0c;如果你想收集表单数据&#xff…...

#Uniapp篇:chrome调试unapp适配

chrome调试设备----使用Android模拟机开发调试移动端页面 Chrome://inspect/#devices MuMu模拟器Edge浏览器&#xff1a;Android原生APP嵌入的H5页面元素定位 chrome://inspect/#devices uniapp单位适配 根路径下 postcss.config.js 需要装这些插件 “postcss”: “^8.5.…...

NXP S32K146 T-Box 携手 SD NAND(贴片式TF卡):驱动汽车智能革新的黄金组合

在汽车智能化的汹涌浪潮中&#xff0c;车辆不再仅仅是传统的交通工具&#xff0c;而是逐步演变为高度智能的移动终端。这一转变的核心支撑&#xff0c;来自于车内关键技术的深度融合与协同创新。车载远程信息处理盒&#xff08;T-Box&#xff09;方案&#xff1a;NXP S32K146 与…...

基于 TAPD 进行项目管理

起因 自己写了个小工具&#xff0c;仓库用的Github。之前在用markdown进行需求管理&#xff0c;现在随着功能的增加&#xff0c;感觉有点难以管理了&#xff0c;所以用TAPD这个工具进行需求、Bug管理。 操作流程 注册 TAPD&#xff0c;需要提供一个企业名新建一个项目&#…...

JavaScript基础-API 和 Web API

在学习JavaScript的过程中&#xff0c;理解API&#xff08;应用程序接口&#xff09;和Web API的概念及其应用是非常重要的。这些工具极大地扩展了JavaScript的功能&#xff0c;使得开发者能够创建出功能丰富、交互性强的Web应用程序。本文将深入探讨JavaScript中的API与Web AP…...

RabbitMQ入门4.1.0版本(基于java、SpringBoot操作)

RabbitMQ 一、RabbitMQ概述 RabbitMQ RabbitMQ最初由LShift和CohesiveFT于2007年开发&#xff0c;后来由Pivotal Software Inc.&#xff08;现为VMware子公司&#xff09;接管。RabbitMQ 是一个开源的消息代理和队列服务器&#xff0c;用 Erlang 语言编写。广泛应用于各种分布…...

uniapp手机号一键登录保姆级教程(包含前端和后端)

目录 前置条件创建uniapp项目并关联uniClound云空间开启一键登录模块并开通一键登录服务编写云函数并上传部署获取手机号流程(第一种) 前端直接调用云函数获取手机号&#xff08;第三种&#xff09;后台调用云函数获取手机号 错误码常见问题 前置条件 手机安装有sim卡手机开启…...