前端滚动组件分享
分享一个前端可视化常用的卡片列表滚动组件,常用于可视化项目左右两侧的卡片列表的滚动。效果如下图所示:

组件描述
- 当鼠标移入滚动区域时,滚动行为停止当鼠标再次离开时,滚动继续
源码展示
<template><div ref="moocBox" class="custom-scroll-content" @mouseout="mouseOut" @mouseover="mouseOver"><slot></slot></div>
</template>
<script>
export default {name: 'CustomScroll',data() {return {speed: 50,myScroll: null};},created() {},mounted() {this.myScroll = setInterval(() => {this.scrollUp();}, this.speed);},destroyed() {clearInterval(this.myScroll);// removeEventListener("scroll", this.myScroll);},beforeDestoryed() {clearInterval(this.myScroll);this.myScroll = null},methods: {/*** @description: 滚动* @return void 滚动*/scrollUp() {this.$refs.moocBox.scrollTop += 1;// 判断滚动条是否到底if (this.$refs.moocBox.scrollTop + this.$refs.moocBox.clientHeight >= this.$refs.moocBox.scrollHeight) {this.$refs.moocBox.scrollTop = 0;}},/*** @description: 鼠标滑过暂停滚动* @return void 清除定时器,实现暂停*/mouseOver() {clearInterval(this.myScroll);},/*** @description: 鼠标移开重新滚动* @return void 设定定时器,实现滚动*/mouseOut() {this.myScroll = setInterval(() => {this.scrollUp();}, this.speed);},}
};
</script>
<style>
.custom-scroll-content {height: 100%;overflow: auto;
}
</style>
使用指南
<template><div class="home"><div class="container__div_height-500"><CustomScroll><div class="item__div_height-100" v-for="i in 10" :key="i">{{ i+1 }}</div></CustomScroll></div></div>
</template>
import CustomScroll from '../components/customScroll.vue';export default {name: 'Home',components: {CustomScroll,},
}
</script>
<style>
.home {height: 100%;width: 100%;display: flex;align-items: center;justify-content: center;
}
.container__div_height-500 {height: 500px;width: 400px;
}
.item__div_height-100 {height: 100px;width: 100%;background-color: pink;margin-bottom: 12px;cursor: pointer;
}
.item__div_height-100:last-child {margin-bottom: 0;
}
::-webkit-scrollbar {width: 0!important;
}
</style>
属性说明
| 属性 | 属性值 | 类型 |
|---|---|---|
| speed | 设置滚动速度,默认50 | Number |
相关文章:
前端滚动组件分享
分享一个前端可视化常用的卡片列表滚动组件,常用于可视化项目左右两侧的卡片列表的滚动。效果如下图所示: 组件描述 当鼠标移入滚动区域时,滚动行为停止当鼠标再次离开时,滚动继续 源码展示 <template><div ref"…...
【linux开发工具】vim详解
📙 作者简介 :RO-BERRY 📗 学习方向:致力于C、C、数据结构、TCP/IP、数据库等等一系列知识 📒 日后方向 : 偏向于CPP开发以及大数据方向,欢迎各位关注,谢谢各位的支持 “学如逆水行舟࿰…...
Compose | UI组件(十四) | Navigation-Data - 页面导航传递数据
文章目录 前言传参流程实例说明普通方式传值定义接受参数格式定义接受参数类型获取参数传入参数传参和接受参数效果图 结合 ViewModel 传递参数定义ViewModel在 navigation 定义 ViewModel 实例,并且传入 LoginScreen传入输入框中的值,并且跳转传值获取值…...
部署一个在线OCR工具
效果 安装 1.拉取镜像 # 从 dockerhub pull docker pull mmmz/trwebocr:latest 2.运行容器 # 运行镜像 docker run -itd --rm -p 10058:8089 --name trwebocr mmmz/trwebocr:latest 使用 打开浏览器输入 http://192.168.168.110:10058/ 愉快滴使用吧...
【北邮鲁鹏老师计算机视觉课程笔记】01 introduction
1 生活中的计算机视觉 生活中的各种计算机视觉识别系统已经广泛地应用起来了。 2 计算机视觉与其他学科的关系 认知科学和神经科学是研究人类视觉系统的,如果能把人类视觉系统学习得更好,可以迁移到计算机视觉。是计算机视觉的理论基础。 算法、系统、框…...
maven依赖报错处理(或者maven怎么刷新都下载不了依赖)
maven依赖报错,或者不报错,但是怎么刷新maven都没反应,可以试一下以下操作 当下载jar的时候,如果断网,或者连接超时的时候,会自动在文件夹中创建一个名为*lastupdate的文件,当有了这个文件之后…...
[VulnHub靶机渗透] dpwwn: 1
🍬 博主介绍👨🎓 博主介绍:大家好,我是 hacker-routing ,很高兴认识大家~ ✨主攻领域:【渗透领域】【应急响应】 【python】 【VulnHub靶场复现】【面试分析】 🎉点赞➕评论➕收藏…...
Android14音频进阶:MediaPlayerService如何启动AudioTrack 下篇(五十六)
简介: CSDN博客专家,专注Android/Linux系统,分享多mic语音方案、音视频、编解码等技术,与大家一起成长! 优质专栏:Audio工程师进阶系列【原创干货持续更新中……】🚀 优质专栏:多媒体系统工程师系列【原创干货持续更新中……】🚀 人生格言: 人生从来没有捷径,只…...
Python基础篇_修饰符(Decorators)【下】
上一篇:Python基础篇_修饰符(Decorators)【中】property、<attribute_name>.setter、<attribute_name>.deleter、functools.lru_cache(maxsizeNone) Python基础篇_修饰符(Decorators)【下】 Python基础篇_…...
C#,十进制展开数(Decimal Expansion Number)的算法与源代码
1 十进制展开数 十进制展开数(Decimal Expansion Number)的计算公式: DEN n^3 - n - 1 The decimal expansion of a number is its representation in base -10 (i.e., in the decimal system). In this system, each "decimal place…...
Vue3快速上手(一)使用vite创建项目
一、准备 在此之前,你的电脑,需要安装node.js,我这边v18.19.0 wangdymb 2024code % node -v v18.19.0二、创建 执行npm create vuelatest命令即可使用vite创建vue3项目 有的同学可能卡主不动,可能是npm的registry设置的问题 先看下&#x…...
使用navicat导出mysql离线数据后,再导入doris的方案
一、背景 doris本身是支持直接从mysql中同步数据的,但有时候,客户不允许我们使用doris直连mysql,此时就需要客户配合将mysql中的数据手工导出成离线文件,我们再导入到doris中 二、环境 doris 1.2 三、方案 doris支持多种导入…...
re:从0开始的CSS学习之路 1. CSS语法规则
0. 写在前面 现在大模型卷的飞起,感觉做页面的活可能以后就不需要人来做了,不知道现在还有没有学前端的必要。。。 1. HTML和CSS结合的三种方式 在HTML中,我们强调HTML并不关心显示样式,样式是CSS的工作,现在就轮到C…...
npm install express -g报错或一直卡着,亲测可解决
问题描述: 最近学习vue3前端框架,安装Node.js之后,在测试是否可行时,cmd窗口执行了:npm install express -g,发现如下图所示一直卡着不动,最后还报错了,网上找了好久,各…...
机器学习11-前馈神经网络识别手写数字1.0
在这个示例中,使用的神经网络是一个简单的全连接前馈神经网络,也称为多层感知器(Multilayer Perceptron,MLP)。这个神经网络由几个关键组件构成: 1. 输入层 输入层接收输入数据,这里是一个 28x…...
vscode wsl远程连接 权限问题
问题描述:执行命令时遇到Operation not permitted 和 Permission denied问题,是有关ip地址和创建文件的权限问题,参考网络上更改wsl.conf文件等方法均无法解决,只能加sudo来解决...
VED-eBPF:一款基于eBPF的内核利用和Rootkit检测工具
关于VED-eBPF VED-eBPF是一款功能强大的内核漏洞利用和Rootkit检测工具,该工具基于eBPF技术实现其功能,可以实现Linux操作系统运行时内核安全监控和漏洞利用检测。 eBPF是一个内核内虚拟机,它允许我们直接在内核中执行代码,而无…...
配置ARM交叉编译工具的通用步骤
ARM交叉编译工具是用于编译在ARM架构上运行的代码的工具。这些工具允许开发者在一种架构(通常是x86或x64)上编写和编译代码,然后将其移植到ARM架构上运行。 ARM交叉编译工具链通常包括编译器、链接器、调试器和其他必要的工具,用…...
相机图像质量研究(5)常见问题总结:光学结构对成像的影响--景深
系列文章目录 相机图像质量研究(1)Camera成像流程介绍 相机图像质量研究(2)ISP专用平台调优介绍 相机图像质量研究(3)图像质量测试介绍 相机图像质量研究(4)常见问题总结:光学结构对成像的影响--焦距 相机图像质量研究(5)常见问题总结:光学结构对成…...
使用django构建一个多级评论功能
,评论系统是交流和反馈的重要工具,尤其是多级评论系统,它允许用户回复特定评论,形成丰富的对话结构。这个文章是使用Django框架从零开始构建一个多级评论系统。Django是一个高级Python Web框架,它鼓励快速开发和干净、…...
解锁QQ音乐加密音频:QMCDecode让macOS用户重获音乐自由
解锁QQ音乐加密音频:QMCDecode让macOS用户重获音乐自由 【免费下载链接】QMCDecode QQ音乐QMC格式转换为普通格式(qmcflac转flac,qmc0,qmc3转mp3, mflac,mflac0等转flac),仅支持macOS,可自动识别到QQ音乐下载目录,默认…...
瑞萨e² studio嵌入式IDE深度解析:从图形化配置到多核开发的实战指南
1. 项目概述:为什么我们需要关注e studio?如果你是一位嵌入式开发者,尤其是长期耕耘在瑞萨电子(Renesas)MCU生态中的朋友,那么对e studio这个名字一定不会陌生。它不是一个横空出世的全新IDE,而…...
开源镜像站架构与部署实战:APT、Docker、PyPI同步与性能优化
1. 项目概述:一个面向中文开发者的开源镜像站如果你是一名在国内的开发或运维工程师,对“镜像站”这个词一定不会陌生。无论是安装Python的pip包,还是更新Ubuntu的apt源,又或是拉取Docker镜像,我们常常会受限于网络环境…...
AI代理环境交互SDK:TypeScript实现标准化观察与动作接口
1. 项目概述:一个为AI代理构建交互式环境的TypeScript SDK如果你正在尝试构建一个能够与现实世界应用(比如浏览器、IDE、甚至操作系统)进行交互的AI代理,那么你很可能已经遇到了一个核心难题:如何让代理“看见”并“操…...
工业物联网边缘计算:云IO模块如何重塑分布式数据采集与控制
1. 项目概述:当边缘计算遇上工业IO最近在跟进一个智慧水务的现场改造项目,客户需要在十几个分散的泵站和阀门节点部署数据采集与控制点。传统方案要么是每个点拉光纤、部署工控机加采集卡,成本高得吓人;要么是用一堆带4G DTU的IO模…...
如何为PS3游戏下载官方更新补丁:一个Python工具的完整指南
如何为PS3游戏下载官方更新补丁:一个Python工具的完整指南 【免费下载链接】PS3GameUpdateDownloader downloader for ps3 game updates (.pkg files) from official sony servers written in python 项目地址: https://gitcode.com/gh_mirrors/ps/PS3GameUpdateD…...
ARM GICv3中断控制器系统寄存器解析与应用
1. ARM GICv3中断控制器系统寄存器深度解析在ARMv8-A架构的嵌入式系统中,中断控制器扮演着至关重要的角色。作为硬件中断信号的中枢管理系统,GIC(Generic Interrupt Controller)从v3版本开始进行了革命性的架构革新,其…...
BilibiliDown终极指南:5分钟掌握B站视频下载神器
BilibiliDown终极指南:5分钟掌握B站视频下载神器 【免费下载链接】BilibiliDown (GUI-多平台支持) B站 哔哩哔哩 视频下载器。支持稍后再看、收藏夹、UP主视频批量下载|Bilibili Video Downloader 😳 项目地址: https://gitcode.com/gh_mirrors/bi/Bil…...
推理服务为什么一加 Stop Sequences 就开始流式看着正常却尾延迟抖动:从 Token Suffix Match 到 Batch Exit 对齐的工程实战
很多团队给推理服务加 stop sequences,原意是让 JSON、工具调用或 SQL 输出在边界处稳稳停住。⚠️ 真进生产后,最先变差的往往不是准确率,而是尾延迟:流式首屏看着正常,GPU 利用率也不低,可 P99 会在高并发…...
AI安全实战:构建AIGC内容检测与防御系统
1. 项目概述:当AI遇上网络安全最近在GitHub上看到一个挺有意思的项目,叫genaura-guard。光看名字,可能有点摸不着头脑,但如果你对AI生成内容(AIGC)和网络安全这两个领域有所关注,大概就能猜到它…...
