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

React 消息文本循环展示

需求

页面上有个小喇叭,循环展示消息内容

逻辑思路

  • 设置定时器,修改translateX属性来实现滚动,
  • 判断滚动位置,修改list位置来实现无限滚动

实现效果

在这里插入图片描述

代码

/** @Author: Do not edit* @Date: 2023-09-07 11:11:45* @LastEditors: atwlee* @LastEditTime: 2023-09-07 15:23:21* @Description:* @FilePath: /pan-ui/packages/Base/src/MessageScroll/index.tsx*/import { ReactNode, forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
import './index.css';export interface MessageScrollProps {messages: ReactNode[];speed?: number;gap?: number;
}export interface MessageScrollRef {start: () => void;pause: () => void;restart: (sleep?: number) => void;
}const Index = forwardRef<MessageScrollRef, MessageScrollProps>((props, ref) => {const { messages, speed = 20, gap = 20 } = props;const [messageList, setMessageList] = useState<ReactNode[]>([]);const messageListRef = useRef<ReactNode[]>([]);const [translateX, setTranslateX] = useState(0);const container = useRef<HTMLDivElement>(null);const exceed = useRef(false);const scrollX = useRef(0);const run = useRef(true);useEffect(() => {setMessageList(messages);}, [messages]);useEffect(() => {restart(0);if (container.current) {exceed.current = container.current.clientWidth < container.current.scrollWidth - gap;}messageListRef.current = messageList;}, [messageList]);const handleMessage = () => {const firstChildWidth = container.current?.firstElementChild?.clientWidth;if (firstChildWidth && scrollX.current >= firstChildWidth + gap) {const [first, ...rest] = messageListRef.current;setMessageList([...rest, first]);}};useEffect(() => {const timer = setInterval(() => {if (run.current && exceed.current) {scrollX.current += 0.5;handleMessage();setTranslateX(translateX - scrollX.current);}}, speed);return () => clearInterval(timer);}, []);const restart = (sleep = 200, reset = false) => {setTranslateX(0);reset && setMessageList(messages);scrollX.current = 0;run.current = false;const timer = setTimeout(() => {run.current = true;clearTimeout(timer);}, sleep);};useImperativeHandle(ref, () => ({start: () => {run.current = true;},pause: () => {run.current = false;},restart: (sleep) => {restart(sleep, true);},}));return (<div className="rc-message-scroll-container" ref={container}>{messageList.map((message, index) => (<divkey={index}className="rc-message-scroll-item"style={{ transform: `translate(${translateX}px)`, marginRight: `${gap}px` }}>{message}</div>))}</div>);
});export default Index;
.rc-message-scroll-container {position: relative;display: flex;flex-wrap: nowrap;overflow: hidden;
}
.rc-message-scroll-container .rc-message-scroll-item{flex-shrink: 0;
}

FAQ

  1. 判断了内容不超出,就不滚动
  2. 如果内容超出了,但是内容太少,导致没有及时的handleMessage 没有处理这一块的逻辑。解决办法,就是double一下数据

相关文章:

React 消息文本循环展示

需求 页面上有个小喇叭&#xff0c;循环展示消息内容 逻辑思路 设置定时器&#xff0c;修改translateX属性来实现滚动&#xff0c;判断滚动位置&#xff0c;修改list位置来实现无限滚动 实现效果 代码 /** Author: Do not edit* Date: 2023-09-07 11:11:45* LastEditors: …...

java获取jenkins发布版本信息

一.需求&#xff1a; 系统cicd发布时首页需要展示jenkins发布的版本和优化内容 二.思路: 1.jenkins创建用户和秘钥 2.找到对应构建任务信息的api 3.RestTemplate发起http请求 三.实现&#xff1a; 1.创建用户和token 2.查找jenkins API 创建 Job POST http://localhost…...

java八股文面试[数据库]——可重复读怎么实现的(MVCC)

可重复读&#xff08;repeatable read&#xff09;定义&#xff1a; 一个事务执行过程中看到的数据&#xff0c;总是跟这个事务在启动时看到的数据是一致的。 MVCC MVCC&#xff0c;多版本并发控制, 用于实现读已提交和可重复读隔离级别。 MVCC的核心就是 Undo log多版本链 …...

cl 和 “clangtidy“分别是什么?是同一样东西吗?

作者&#xff1a;gentle_zhou 原文链接&#xff1a;cl 和 "clangtidy"分别是什么&#xff1f;是同一样东西吗&#xff1f;-云社区-华为云 先说结论&#xff1a;这两个是不同的工具&#xff0c;cl是编译器&#xff0c;clangtidy是代码检查工具&#xff0c;它们不是一…...

ubuntu22.04开机自启动Eureka服务

ubuntu22.04开机自启动Eureka服务 1、创建启动脚本eurekaService.sh #我们把启动脚本放在/usr/software目录下 cd /usr/software vim eurekaService.sheurekaService.sh内容为 #!/bin/sh # this is a eurekaService shell to startup at the mechian power on.echo "eu…...

【 OpenGauss源码学习 —— 列存储(analyze)(三)】

列存储&#xff08;analyze&#xff09; acquire_sample_rows 函数RelationGetNumberOfBlocks 函数BlockSampler_Init 函数anl_init_selection_state 函数BlockSampler_GetBlock 函数ReadBufferExtendedPageGetMaxOffsetNumber 函数HeapTupleSatisfiesVacuum 函数heapCopyTuple…...

Element Plus table formatter函数返回html内容

查看 Element Plus table formatter 支持返回 类型为string 和 VNode对象&#xff1b; 若依全局直接用h函数&#xff0c;无需引用 下面普通基本用法&#xff1a;在Element Plus中&#xff0c;你可以使用自定义的formatter函数来返回VNode对象&#xff0c;从而实现更灵活的自定…...

c++ mutable

mutable 可变的&#xff0c;易变的 跟 constant&#xff08;既C中的const&#xff09;是反义词作用&#xff1a; 保持常量对象中大部分数据成员仍然是“只读”的情况下&#xff0c;实现对个别数据成员的修改使类的const函数可以修改对象的mutable数据成员。 注意事项&#xff…...

element-plus 踩的坑

原来node版本是16.17.0,装element-plus死活装不上&#xff0c;结果要把node版本升级到18以上&#xff0c;真坑呀&#xff0c;也没人告诉我要这么干...

Python、Rust中的协程

协程 协程在不同的堆栈上同时运行&#xff0c;但每次只有一个协程运行&#xff0c;而其调用者则等待: F启动G&#xff0c;但G并不会立即运行&#xff0c;F必须显式的恢复G&#xff0c;然后 G 开始运行。在任何时候&#xff0c;G 都可能转身并让步返回到 F。这会暂停 G 并继续…...

Vuepress样式修改内容宽度

1、相关文件 一般所在目录node_modules\vuepress\theme-default\styles\wrapper.styl 2、调整宽度&#xff0c;截图中是已经调整好的&#xff0c;在我电脑上显示刚刚好。...

Vue2电商前台项目——项目的初始化及搭建

Vue2电商前台项目——项目的初始化及搭建 Vue基础知识点击此处——Vue.js 文章目录 Vue2电商前台项目——项目的初始化及搭建一、项目初始化1、脚手架目录介绍2、项目的其他配置 二、项目的路由分析及搭建1、项目的路由分析2、开发项目的步骤3、非路由组件的搭建4、路由组件的搭…...

递归算法学习——N皇后问题,单词搜索

目录 ​编辑 一&#xff0c;N皇后问题 1.题意 2.解释 3.题目接口 4.解题思路及代码 二&#xff0c;单词搜索 1.题意 2.解释 3.题目接口 4.思路及代码 一&#xff0c;N皇后问题 1.题意 按照国际象棋的规则&#xff0c;皇后可以攻击与之处在同一行或同一列或同一斜线上…...

【SpringBoot】mockito+junit 单元测试

1.POM 引入以下依赖 <dependency><groupId>junit</groupId><artifactId>junit</artifactId><version>4.13.2</version><scope>test</scope></dependency><dependency><groupId>org.springframework.b…...

webserver 同步 I/O 模拟 Proactor 模式的工作流程

服务器基本框架、I/O 模型、事件处理模式 一、服务器编程基本框架 虽然服务器程序种类繁多&#xff0c;但其基本框架都一样&#xff0c;不同之处在于逻辑处理。 二、五种 I/O 模型 阻塞/非阻塞、同步/异步&#xff08;网络IO&#xff09;_呵呵哒(&#xffe3;▽&#xffe3;)&…...

mysql8-基于docker搭建主从同步

一、环境信息 系统版本&#xff1a;CentOS Linux release 7.9.2009 (Core) cat /etc/centos-release Docker版本&#xff1a;Docker version 20.10.6, build 370c289 docker --version Docker-compose版本&#xff1a;Docker Compose version v2.10.2 docker-compose --versio…...

智能水表远程控制系统:引领节水新时代

随着科技的不断发展&#xff0c;物联网技术逐渐融入到我们的日常生活中。其中&#xff0c;智能水表远程控制系统成为一项重要创新&#xff0c;对于提高水资源利用率、实现绿色节水具有重要意义。下面小编就来为大家介绍下智能水表远程控制系统吧! 一、智能水表远程控制系统定义…...

【FusionInsight 迁移】HBase从C50迁移到6.5.1(03)6.5.1上准备Loader

【FusionInsight 迁移】HBase从C50迁移到6.5.1&#xff08;03&#xff09;6.5.1上准备Loader HBase从C50迁移到6.5.1&#xff08;03&#xff09;6.5.1上准备Loader登录新集群FusionInsight 6.5.1的Manager准备Loader服务准备Loader Role准备Loader User HBase从C50迁移到6.5.1&…...

redis多线程操作

今天更新一个redis多线程操作&#xff0c; 可直接搬运 import redis, os, threading, queue import pandas as pd# 创建一个任务队列 task_queue queue.Queue()def read_excel(folder_path):total_list []for filepath, dirnames, filenames in os.walk(folder_path):for fi…...

OpenCV(十七):拉普拉斯图像金字塔

1.拉普拉斯图像金字塔原理 拉普拉斯图像金字塔是一种多尺度图像表示方法&#xff0c;通过对高斯金字塔进行差分运算得到。它能够提供图像在不同尺度上的细节信息&#xff0c;常用于图像处理任务如图像增强、边缘检测等。 下面是拉普拉斯图像金字塔的原理和步骤&#xff1a; 构…...

多模态2025:技术路线“神仙打架”,视频生成冲上云霄

文&#xff5c;魏琳华 编&#xff5c;王一粟 一场大会&#xff0c;聚集了中国多模态大模型的“半壁江山”。 智源大会2025为期两天的论坛中&#xff0c;汇集了学界、创业公司和大厂等三方的热门选手&#xff0c;关于多模态的集中讨论达到了前所未有的热度。其中&#xff0c;…...

Prompt Tuning、P-Tuning、Prefix Tuning的区别

一、Prompt Tuning、P-Tuning、Prefix Tuning的区别 1. Prompt Tuning(提示调优) 核心思想:固定预训练模型参数,仅学习额外的连续提示向量(通常是嵌入层的一部分)。实现方式:在输入文本前添加可训练的连续向量(软提示),模型只更新这些提示参数。优势:参数量少(仅提…...

《从零掌握MIPI CSI-2: 协议精解与FPGA摄像头开发实战》-- CSI-2 协议详细解析 (一)

CSI-2 协议详细解析 (一&#xff09; 1. CSI-2层定义&#xff08;CSI-2 Layer Definitions&#xff09; 分层结构 &#xff1a;CSI-2协议分为6层&#xff1a; 物理层&#xff08;PHY Layer&#xff09; &#xff1a; 定义电气特性、时钟机制和传输介质&#xff08;导线&#…...

2023赣州旅游投资集团

单选题 1.“不登高山&#xff0c;不知天之高也&#xff1b;不临深溪&#xff0c;不知地之厚也。”这句话说明_____。 A、人的意识具有创造性 B、人的认识是独立于实践之外的 C、实践在认识过程中具有决定作用 D、人的一切知识都是从直接经验中获得的 参考答案: C 本题解…...

Android第十三次面试总结(四大 组件基础)

Activity生命周期和四大启动模式详解 一、Activity 生命周期 Activity 的生命周期由一系列回调方法组成&#xff0c;用于管理其创建、可见性、焦点和销毁过程。以下是核心方法及其调用时机&#xff1a; ​onCreate()​​ ​调用时机​&#xff1a;Activity 首次创建时调用。​…...

视频行为标注工具BehaviLabel(源码+使用介绍+Windows.Exe版本)

前言&#xff1a; 最近在做行为检测相关的模型&#xff0c;用的是时空图卷积网络&#xff08;STGCN&#xff09;&#xff0c;但原有kinetic-400数据集数据质量较低&#xff0c;需要进行细粒度的标注&#xff0c;同时粗略搜了下已有开源工具基本都集中于图像分割这块&#xff0c…...

JS设计模式(4):观察者模式

JS设计模式(4):观察者模式 一、引入 在开发中&#xff0c;我们经常会遇到这样的场景&#xff1a;一个对象的状态变化需要自动通知其他对象&#xff0c;比如&#xff1a; 电商平台中&#xff0c;商品库存变化时需要通知所有订阅该商品的用户&#xff1b;新闻网站中&#xff0…...

Linux中《基础IO》详细介绍

目录 理解"文件"狭义理解广义理解文件操作的归类认知系统角度文件类别 回顾C文件接口打开文件写文件读文件稍作修改&#xff0c;实现简单cat命令 输出信息到显示器&#xff0c;你有哪些方法stdin & stdout & stderr打开文件的方式 系统⽂件I/O⼀种传递标志位…...

归并排序:分治思想的高效排序

目录 基本原理 流程图解 实现方法 递归实现 非递归实现 演示过程 时间复杂度 基本原理 归并排序(Merge Sort)是一种基于分治思想的排序算法&#xff0c;由约翰冯诺伊曼在1945年提出。其核心思想包括&#xff1a; 分割(Divide)&#xff1a;将待排序数组递归地分成两个子…...

PydanticAI快速入门示例

参考链接&#xff1a;https://ai.pydantic.dev/#why-use-pydanticai 示例代码 from pydantic_ai import Agent from pydantic_ai.models.openai import OpenAIModel from pydantic_ai.providers.openai import OpenAIProvider# 配置使用阿里云通义千问模型 model OpenAIMode…...