Vue 循环走马灯

1、使用 transform: translateX(),循环将滚动内容在容器内偏移,超出容器部分隐藏;

2、避免滚动到末尾时出现空白,需要预留多几个。

3、一次循环偏移的距离scrollLoopWidth 可能受样式影响需要做些微调,比如单个item的宽度、间隔、边框等。

<template><div><div class="scroll-container"><div class="scroll-content" id="scroll-content"><div class="scroll-item" v-for="(item, index) in itemList" :key="index"><div>{{ item.title }}</div><div>{{ item.desc }}</div></div></div></div></div>
</template>
<script>
export default {data() {return {itemList: [{title: "Vue",desc: "一套用于构建用户界面的渐进式框架"},{title: "Vite",desc: "下一代前端开发与构建工具"},{title: "Pinia",desc: "Vue状态管理框架"},{title: "TypeScript",desc: "JavaScript类型的超集,可以编译成纯JavaScript"},{title: "NaiveUI",desc: "Vue3组件库"},// 重复放几个,假装无缝衔接,如果重复的个数需要多个才能铺满屏,可以使用数组的相关方法将已经滚动过了的放到数组后面{title: "Vue",desc: "一套用于构建用户界面的渐进式框架"},{title: "Vite",desc: "下一代前端开发与构建工具"},{title: "Pinia",desc: "Vue状态管理框架"}],scrollContent: "",scrollSpeed: 1, // 每次偏移像素translateX: 0,scrollInterval: 0,scrollLoopWidth: 0,}},mounted() {this.scrollContent = document.getElementById("scroll-content");let item = this.itemList.length - 3; // 一次循环移动的item数this.scrollLoopWidth = 240 * item + 10 * (2 * item + 1); // 单个宽度 * 个数 + 间隔 (注意,这里可能受样式影响,需要做适当的调整)this.scrollInterval = setInterval(() => {this.autoScrollContent();}, 10); // 每10毫秒移动 scrollSpeed 个像素},methods: {autoScrollContent() {this.translateX += this.scrollSpeed;this.scrollContent.style.transform = `translateX(${-this.translateX}px)`;// 一次循环结束,重新滚动if (this.translateX >= this.scrollLoopWidth) {this.translateX = 0;}},},
}
</script>
<style lang="stylus" scoped>.scroll-container {width: 800px;height: 400px;background-color: #e9e9e9;overflow: hidden;.scroll-content {display: flex;align-items: center;.scroll-item {width: 240px;min-width: 240px;height: 100px;text-align: center;margin: 0 10px;border: 1px solid #409eff;img {width: 50px;height: 50px;border-radius: 25px;}}}}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/206877.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

题目:分糖果(蓝桥OJ 2928)

题目描述&#xff1a; 解题思路&#xff1a; 本题采用贪心思想 图解 题解&#xff1a; #include<bits/stdc.h> using namespace std;const int N 1e6 9; char s[N];//写字符串数组的一种方法,像数组一样***int main() {int n, x;cin >> n >> x;for(int …

CSS新手入门笔记整理:元素类型相互转换

元素类型 块元素&#xff08;block&#xff09; 独占一行&#xff0c;排斥其他元素跟其位于同一行&#xff0c;包括块元素和行内元素。块元素内部可以容纳其他块元素和行内元素。可以定义 width&#xff0c;也可以定义 height。可以定义 4 个方向的 margin。 行内元素&#xf…

使用navicat(或者其他数据库管理工具)、powerdesigner导出数据字典

适合先有数据库结构&#xff0c;后需要导出数据字典的情况&#xff0c;多数在发开完成交文档或者用户有库的情况下 有条件的话推荐用powerdesigner导出&#xff0c;比较好看 如果用powerdesigner导出的注释不对&#xff0c;是因为数据库的编码不对 1、使用navicat导出 在该数…

代码随想录算法训练营第45天| 70. 爬楼梯 (进阶) 322. 零钱兑换 279.完全平方数

JAVA代码编写 70. 爬楼梯&#xff08;进阶版) 卡码网&#xff1a;57. 爬楼梯&#xff08;第八期模拟笔试&#xff09; 题目描述 假设你正在爬楼梯。需要 n 阶你才能到达楼顶。 每次你可以爬至多m (1 < m < n)个台阶。你有多少种不同的方法可以爬到楼顶呢&#xff1f…

菜鸟学习日记(python)——推导式

python中的推导式是一种独特的数据处理方式&#xff0c;可以从一个数据序列去构建另一个新的数据序列的结构体。 它包括以下推导式&#xff1a; 列表&#xff08;list&#xff09;推导式字典&#xff08;dict&#xff09;推导式集合&#xff08;set&#xff09;推导式元组&am…

Multi-Cell Downlink Beamforming: Direct FP, Closed-Form FP, Weighted MMSE

这里写自定义目录标题 Direct FPClosed-Form FPthe Lagrangian functionthe Lagrange dual function: maximizing the Lagrangianthe Lagrange dual problem: minimizing the Lagrange dual functionClosed-Form FP Weighted MMSE原论文 Lagrange dual5.1.1 The Lagrangian5.1.…

阿里云服务器经济型、通用算力型、计算型、通用型、内存型实例区别及选择参考

当我们通过阿里云的活动购买云服务器会发现&#xff0c;相同配置的云服务器往往有多个不同的实例可选&#xff0c;而且价格差别也比较大&#xff0c;例如同样是4核8G的配置的云服务器&#xff0c;经济型e实例活动价格只要1500.48/1年起&#xff0c;通用算力型u1实例要1795.97/1…

nvidia安装出现7-zip crc error解决办法

解决办法&#xff1a;下载network版本&#xff0c;重新安装。&#xff08;选择自己需要的版本&#xff09; 网址&#xff1a;CUDA Toolkit 12.3 Update 1 Downloads | NVIDIA Developer 分析原因&#xff1a;local版本的安装包可能在下载过程中出现损坏。 本人尝试过全网说的…

linux 系统安全基线 安全加固操作

目录 用户口令设置 root用户远程登录限制 检查是否存在除root之外UID为0的用户 ​​​​​​​root用户环境变量的安全性 ​​​​​​​远程连接的安全性配置 ​​​​​​​用户的umask安全配置 ​​​​​​​重要目录和文件的权限设置 ​​​​​​​找未授权的SUID…

json转yolo格式

json转yolo格式 视觉分割得一些标注文件是json格式&#xff0c;比如&#xff0c;舌头将这个舌头区域分割出来&#xff08;用mask二值图的形式&#xff09;&#xff0c;对舌头的分割第一步是需要检测出来&#xff0c;缺少数据集&#xff0c;可以使用分割出来的结果&#xff0c;将…

无公网IP环境如何SSH远程连接Deepin操作系统

文章目录 前言1. 开启SSH服务2. Deppin安装Cpolar3. 配置ssh公网地址4. 公网远程SSH连接5. 固定连接SSH公网地址6. SSH固定地址连接测试 前言 Deepin操作系统是一个基于Debian的Linux操作系统&#xff0c;专注于使用者对日常办公、学习、生活和娱乐的操作体验的极致&#xff0…

数据仪表盘设计:可视化数据指标和报告

写在开头 在信息爆炸的时代,数据不再是简单的数字和图表,而是一种有机的信息体系。如何将这些琳琅满目的数据以一种直观而高效的方式展示,成为企业决策者和分析师们共同关注的问题。本文将带您深入学习如何设计和创建数据仪表盘,使数据指标和报告以一目了然的方式呈现。 …

Python---time库

目录 时间获取 时间格式化 程序计时 time库包含三类函数&#xff1a; 时间获取&#xff1a;time() ctime() gmtime() 时间格式化&#xff1a;strtime() strptime() 程序计时&#xff1a;sleep() perf_counter() 下面逐一介绍&#…

H3.3K27M弥漫性中线胶质瘤的反义寡核苷酸治疗

今天给同学们分享一篇实验文章“Antisense oligonucleotide therapy for H3.3K27M diffuse midline glioma”&#xff0c;这篇文章发表在Sci Transl Med期刊上&#xff0c;影响因子为17.1。 结果解读&#xff1a; CRISPR-Cas9消耗H3.3K27M恢复了H3K27三甲基化&#xff0c;并延…

Echarts地图案例及常见问题

前言 ECharts 是一个使用 JavaScript 实现的开源可视化库,它可以帮助用户以简单的方式创建复杂的时间序列、条形图、饼图、地图等图形。 Echarts绘制地图的案例 展示了中国各省份的人口数量 var myChart = echarts.init(document.getElementById(main)); var option = {t…

【TailwindCSS】

TailwindCSS作为一种现代化的CSS框架&#xff0c;以其高度的定制性和灵活性受到前端开发者的青睐。本文旨在提供一份详细的TailwindCSS使用教程&#xff0c;特别适用于Vite和Vue框架的组合。 我们将从安装开始&#xff0c;深入探讨如何在项目中有效利用TailwindCSS的各项功能&…

在AWS Lambda上部署标准FFmpeg工具——Docker方案

大纲 1 确定Lambda运行时环境1.1 Lambda系统、镜像、内核版本1.2 运行时1.2.1 Python1.2.2 Java 2 启动EC23 编写调用FFmpeg的代码4 生成docker镜像4.1 安装和启动Docker服务4.2 编写Dockerfile脚本4.3 生成镜像 5 推送镜像5.1 创建存储库5.2 给EC2赋予角色5.2.1 创建策略5.2.2…

【带头学C++】----- 九、类和对象 ---- 9.10 C++设计模式之单例模式设计

❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️麻烦您点个关注&#xff0c;不迷路❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️ 目 录 9.10 C设计模式之单例模式设计 举例说明&#xff1a; 9.10 C设计模式之单例模式设计 看过我之前的文章的&#xff0c;简单讲解过C/Q…

遥测终端机RTU:实现远程监测和控制的重要工具

遥测终端机RTU对设备进行远程监测和控制&#xff0c;支持采集和传输数据&#xff0c;以实现对工业过程、公用事业、水文和环境的监测和管理。 遥测终端机RTU工作原理 计讯物联遥测终端机RTU通过网口、串口进行传感器/设备等现场数据采集&#xff0c;将其转换为数字信号&#xf…

【LeetCode】202. 快乐数

202. 快乐数 难度&#xff1a;简单 题目 编写一个算法来判断一个数 n 是不是快乐数。 「快乐数」 定义为&#xff1a; 对于一个正整数&#xff0c;每一次将该数替换为它每个位置上的数字的平方和。然后重复这个过程直到这个数变为 1&#xff0c;也可能是 无限循环 但始终变…