在vue3 中,使用element-plus中的el-scrollbar,让内容元素自动滚动
在vue3 中,使用element-plus中的el-scrollbar,在el-scrollbar中如果元素过大出现滑动,就自动滑动,到底部时就返回顶部重新向下滑动,鼠标放入框内停止滑动
模板部分:
<template><el-scrollbar ref="scrollArea" class="scroll-container" @mouseenter="stopScroll" @mouseleave="startScroll"><div class="scroll-content"><!-- 这里放入你想滚动的内容 --></div></el-scrollbar>
</template>
脚本部分:
import { ref, onMounted, onUnmounted } from 'vue';
import { ElScrollbar } from 'element-plus';export default {components: {ElScrollbar},setup() {const scrollArea = ref(null);let timer = null;const SCROLL_SPEED = 1; // 每次滚动的像素数,可以根据需要调整const startScroll = () => {if (timer) {clearInterval(timer);}timer = setInterval(() => {// 获取滚动容器const container = scrollArea.value.$el.querySelector('.el-scrollbar__wrap');// 判断是否已滚动到底部if (container.scrollHeight - (container.scrollTop + container.clientHeight) <= 0) {// 滚动到顶部container.scrollTop = 0;} else {// 向下滚动container.scrollTop += SCROLL_SPEED;}}, 30); // 根据需要调整滚动间隔};const stopScroll = () => {if (timer) {clearInterval(timer);}};onMounted(() => {startScroll();});onUnmounted(() => {stopScroll();});return {scrollArea,startScroll,stopScroll};}
};
样式部分:
.scroll-container {width: 100%;height: 300px; /* 你可以根据需要调整高度 */
}.scroll-content {/* 根据内容进行相应样式调整 */
}
相关文章:
在vue3 中,使用element-plus中的el-scrollbar,让内容元素自动滚动
在vue3 中,使用element-plus中的el-scrollbar,在el-scrollbar中如果元素过大出现滑动,就自动滑动,到底部时就返回顶部重新向下滑动,鼠标放入框内停止滑动 模板部分: <template><el-scrollbar…...
Redis——Redis.conf详解+Redis持久化(RDB和AOF)+Redis订阅发布
配置文件 redis启动时通过配置文件启动 原生配置文件全文在网上随便搜索一下就能找到了。 单位 配置文件 unit单位 对大小写不敏感 包含 类比import,将其他的配置文件引入 网络 bind 127.0.0.1 // 绑定ip protected-mode yes //是否受保护 po…...
16.1.2 Linux 的多用户多任务环境
在 Linux 下面执行一个指令时,系统会将相关的权限、属性、程序码与数据等均载入内存, 并给予这个单元一个程序识别码 (PID),最终该指令可以进行的任务则与这个 PID 的权限有关。根据这个说明,我们就可以简单…...
【11】Redis学习笔记 (微软windows版本)【Redis】
注意:官redis方不支持windows版本 只支持linux 此笔记是依托微软开发windows版本学习 一、前言 Redis简介: Redis(Remote Dictionary Server)是一个开源的内存数据结构存储系统,它也被称为数据结构服务器。Redis以键值对&am…...
数据结构刷题训练:用栈实现队列(力扣OJ)
目录 前言 1. 题目:用栈实现队列 2. 思路 3. 分析 3.1 定义 “ 队列 ” 3.2 创建队列 3.3 入队 3.4 队头数据 3.5 出队 3.6 判空和销毁 4.题解 总结 前言 栈和队列是数据结构中的两个重要概念,它们在算法和程序设计中都有着广泛的应用。本文将带你深入了…...
数字化车间mes生产执行管理系统
数字化车间mes是一款基于B/S结构的生产执行管理系统,主要目的是为中小企业提供了高效率、低成本、通用性强的一个MES系统解决方案,能够实时监控当前完成进度。 功能简介: 生产管理 大屏展示:可以从大屏展示页面看到任工序…...
SpringBoot + Mybatis多数据源
一、配置文件 spring: # datasource: # username: root # password: 123456 # url: jdbc:mysql://127.0.0.1:3306/jun01?characterEncodingutf-8&serverTimezoneUTC # driver-class-name: com.mysql.cj.jdbc.Driverdatasource:# 数据源1onedata:jdbc-url: j…...
ad+硬件每日学习十个知识点(35)23.8.15 (接口电路:RS232、RS485、RS422,单线协议UART->TTL)
文章目录 1.RS232的物理层2.RS232的三种连线方式3.DB9和RJ45(网口)线定义4.RS232的电路设计(tx端需要上拉)5.RS232芯片MAX3221的引脚功能6.什么是压摆率?(压摆率越大越好)7.为什么有了RS232之后,还需要RS48…...
sql类型-用户定义表类型
一、创建用户定义表类型String_Table_Type CREATE TYPE String_Table_Type AS TABLE ( Id nvarchar(200) NOT NULL ) GO DECLARE test String_Table_Type INSERT INTO test VALUES(a),(b),(c) SELECT * FROM test 二、SqlSugar中使用...
小程序 vant 项目记录总结 使用 scss 分享 订阅消息 wxs 分包 echarts图表 canvas getCurrentPages页面栈
小程序 vant vant 下载 npm init -ynpm i vant/weapp -S --production修改 app.json 将 app.json 中的 “style”: “v2” 去除 修改 project.config.json {..."setting": {..."packNpmManually": true,"packNpmRelationList": [{"p…...
关于Power Query中一些忽略的细节
Power Query中一些忽略的细节 重新认识Power Query查询的引用----提高数据加载效率透视逆透视----一对“好朋友”神奇的拼接----实现很多意想不到的操作 重新认识Power Query 关于它的定义,这里不再赘述,主要说一些新的理解。 Power Query 可以理解就是一…...
QML与C++交互
目录 1 QML获取C的变量值 2 QML获取C创建的自定义对象 3 QML发送信号绑定C端的槽 4 C端发送信号绑定qml端槽 5 C调用QML端函数 1 QML获取C的变量值 QQmlApplicationEngine engine; 全局对象 上下文属性 QQmlApplicationEngine engine; QQmlContext *context1 engine.…...
Microsoft ISA服务器配置及日志分析
Microsoft ISA 分析器工具,可分析 Microsoft ISA 服务器(或 Forefront 威胁管理网关服务器)的日志并生成安全和流量报告。支持来自 Microsoft ISA 服务器组件的以下日志: 数据包过滤器ISA 服务器防火墙服务ISA 服务器网络代理服务…...
Openlayers 实战 - 地图视野(View)- 图层 -(layer)- 资源(source)显示等级设置。
Openlayers 实战 - 地图视野(View)- 图层 -(layer)- 资源(source)显示等级设置。 问题原因核心代码完整代码:在线示例 在以往的项目维护中,出现一个问题,使用最新高清底图…...
Linux:shell脚本 正则表达式与AWK
一、正则表达式 由一类特殊字符及文本字符所编写的模式,其中有些字符(元字符)不表示字符字面意义,而表示控制或通配的功能,类似于增强版的通配符功能,但与通配符不同,通配符功能是用来处理文件…...
Android UI自动化测试框架—SoloPi简介
1、UI自动化测试简介 软件测试简介 软件测试是伴随着软件开发一同诞生的,随着软件规模大型化,结构复杂化,软件测试也从最初的简单“调试”,发展到当今的自动化测试。 自动化测试是什么呢?自动化测试是把以人为…...
Android Studio Giraffe 正式版下载地址
Android Studio 是 Android 的官方 IDE。它专为 Android 而打造,可以加快您的开发速度,帮助您为每款 Android 设备构建最高品质的应用。 比以往更快地编码和迭代 Android Studio 基于 IntelliJ IDEA 而构建,可以提供较短的编码和运行工作流…...
【C语言】调试技巧
目录 一、什么是bug? 二、调试 1.一般调试的步骤 2.Debug 和 Release 三、调试环境准备 四、调试时要查看的信息 1.查看临时变量的值 2.查看内存信息 3.查看调用堆栈 4.查看反汇编信息 5.查看寄存器 五、练习 六、常见的coding技巧 七、const的作用 八、编程常见…...
MySQL SUBSTRING_INDEX() 函数的详细介绍
MySQL SUBSTRING_INDEX() 从给定字符串中返回指定数量的分隔符出现之前的子字符串。 当指定数字为正数时从最终分隔符的左侧返回子字符串,当指定数字为负数时从最终分隔符的右侧返回子字符串。 如果指定的次数大于分隔符的出现次数,则返回的子字符串将…...
开源数据库Mysql_DBA运维实战 (DML/DQL语句)
DML/DQL DML INSERT 实现数据的 插入 实例: DELETE 实现数据的 删除 实例: UPDATE 实现数据的 更新 实例1: 实例2: 实例3: DQL DML/DQL DML语句 数据库操纵语言: 插入数据INSERT、删除数据DELE…...
浏览器访问 AWS ECS 上部署的 Docker 容器(监听 80 端口)
✅ 一、ECS 服务配置 Dockerfile 确保监听 80 端口 EXPOSE 80 CMD ["nginx", "-g", "daemon off;"]或 EXPOSE 80 CMD ["python3", "-m", "http.server", "80"]任务定义(Task Definition&…...
使用分级同态加密防御梯度泄漏
抽象 联邦学习 (FL) 支持跨分布式客户端进行协作模型训练,而无需共享原始数据,这使其成为在互联和自动驾驶汽车 (CAV) 等领域保护隐私的机器学习的一种很有前途的方法。然而,最近的研究表明&…...
Axios请求超时重发机制
Axios 超时重新请求实现方案 在 Axios 中实现超时重新请求可以通过以下几种方式: 1. 使用拦截器实现自动重试 import axios from axios;// 创建axios实例 const instance axios.create();// 设置超时时间 instance.defaults.timeout 5000;// 最大重试次数 cons…...
JUC笔记(上)-复习 涉及死锁 volatile synchronized CAS 原子操作
一、上下文切换 即使单核CPU也可以进行多线程执行代码,CPU会给每个线程分配CPU时间片来实现这个机制。时间片非常短,所以CPU会不断地切换线程执行,从而让我们感觉多个线程是同时执行的。时间片一般是十几毫秒(ms)。通过时间片分配算法执行。…...
jmeter聚合报告中参数详解
sample、average、min、max、90%line、95%line,99%line、Error错误率、吞吐量Thoughput、KB/sec每秒传输的数据量 sample(样本数) 表示测试中发送的请求数量,即测试执行了多少次请求。 单位,以个或者次数表示。 示例:…...
BLEU评分:机器翻译质量评估的黄金标准
BLEU评分:机器翻译质量评估的黄金标准 1. 引言 在自然语言处理(NLP)领域,衡量一个机器翻译模型的性能至关重要。BLEU (Bilingual Evaluation Understudy) 作为一种自动化评估指标,自2002年由IBM的Kishore Papineni等人提出以来,…...
WebRTC从入门到实践 - 零基础教程
WebRTC从入门到实践 - 零基础教程 目录 WebRTC简介 基础概念 工作原理 开发环境搭建 基础实践 三个实战案例 常见问题解答 1. WebRTC简介 1.1 什么是WebRTC? WebRTC(Web Real-Time Communication)是一个支持网页浏览器进行实时语音…...
「全栈技术解析」推客小程序系统开发:从架构设计到裂变增长的完整解决方案
在移动互联网营销竞争白热化的当下,推客小程序系统凭借其裂变传播、精准营销等特性,成为企业抢占市场的利器。本文将深度解析推客小程序系统开发的核心技术与实现路径,助力开发者打造具有市场竞争力的营销工具。 一、系统核心功能架构&…...
LOOI机器人的技术实现解析:从手势识别到边缘检测
LOOI机器人作为一款创新的AI硬件产品,通过将智能手机转变为具有情感交互能力的桌面机器人,展示了前沿AI技术与传统硬件设计的完美结合。作为AI与玩具领域的专家,我将全面解析LOOI的技术实现架构,特别是其手势识别、物体识别和环境…...
高考志愿填报管理系统---开发介绍
高考志愿填报管理系统是一款专为教育机构、学校和教师设计的学生信息管理和志愿填报辅助平台。系统基于Django框架开发,采用现代化的Web技术,为教育工作者提供高效、安全、便捷的学生管理解决方案。 ## 📋 系统概述 ### 🎯 系统定…...
