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一下数据

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

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

相关文章

chrome 谷歌浏览器 导出插件拓展和导入插件拓展

给同事部署 微软 RPA时&#xff0c;需要用到对应的chrome浏览器插件&#xff1b;谷歌浏览器没有外网是不能直接下载拓展弄了半小时后才弄好&#xff0c;竟发现没有现成的教程&#xff0c;遂补充&#xff1b; 如何打包导出 谷歌浏览器 地址栏敲 chrome://extensions/在对应的地…

使用Pyarmor保护Python脚本不被反向工程

Python可读性强&#xff0c;使用广泛。虽然这种可读性有利于协作&#xff0c;但也增加了未授权访问和滥用的风险。如果未采取适当的保护&#xff0c;竞争对手或恶意攻击者可以复制您的算法和专有逻辑&#xff0c;这将对您软件的完整性和用户的信任产生负面影响。 实施可靠的安…

负载均衡-ribbon源码解析

负载均衡-ribbon源码解析 1 LoadBalanced注解 /*** 基于ribbon调用服务及负载均衡* return*/ LoadBalanced Bean public RestTemplate restTemplate(){return new RestTemplate(); }Bean ConditionalOnMissingBean public RestTemplateCustomizer restTemplateCustomizer(fin…

【Java】传输层协议TCP

传输层协议TCP TCP报文格式首部长度保留位32位序列号和32位确认应答号标记ACKSYNFINRSTURGPSH 16位窗口大小16位校验和16位紧急指针选项 TCP特点可靠传输实现机制-确认应答超时重传连接管理机制三次握手四次挥手特殊情况 滑动窗口流量控制拥塞控制延迟应答捎带应答面向字节流粘…

RuoYi若依管理系统最新版 基于SpringBoot的权限管理系统

RuoYi是一个后台管理系统&#xff0c;基于经典技术组合&#xff08;Spring Boot、Apache Shiro、MyBatis、Thymeleaf&#xff09;主要目的让开发者注重专注业务&#xff0c;降低技术难度&#xff0c;从而节省人力成本&#xff0c;缩短项目周期&#xff0c;提高软件安全质量。 本…

数据结构:线性表(栈的实现)

文章目录 1. 栈(Stack)1.1 栈的概念1.2 栈的结构链表栈数组栈 2. 栈的定义3. 栈的实现3.1 初始化栈 (StackInit)3.2 入栈 (StackPush)3.3 出栈 (StackPop)3.4 检测栈是否为空 (StackEmpty)3.5 获取栈顶元素 (StackTop)3.6 获取栈中有效元素个数 (StackSize)3.7 销毁栈 (StackDe…

蓝桥杯官网练习题(纸牌三角形)

题目描述 本题为填空题&#xff0c;只需要算出结果后&#xff0c;在代码中使用输出语句将所填结果输出即可。 A,2,3,4,5,6,7,8,9 共 99 张纸牌排成一个正三角形&#xff08;A 按 1 计算&#xff09;。要求每个边的和相等。 下图就是一种排法。 这样的排法可能会有很多。 如果…

Docker-安装(Linux,Windows)

目录 前言安装版本Docker版本说明前提条件Linux安装使用YUM源部署获取阿里云开源镜像站YUM源文件安装Docker-ce配置Docker Daemon启动文件启动Docker服务并查看已安装版本 使用二进制文件部署 Windows安装实现原理安装步骤基本使用 参考说明 前言 本文主要说明Docker及其相关组…

Mac brew -v 报错 fatal: detected dubious ownership in repository

Mac 电脑查询 brew版本时报错&#xff0c;如下错误&#xff1a; Last login: Fri Sep 8 14:56:21 on ttys021 sunshiyusunshiyudeMacBook-Pro-2 ~ % brew -v Homebrew 4.0.3-30-g7ac31f7 fatal: detected dubious ownership in repository at /usr/local/Homebrew/Library/Ta…

C++面向对象

C面向对象知识 内存字节对齐 #pragma pack(n) 表示的是设置n字节对齐,windows默认是8字节&#xff0c;linux是4字节&#xff0c;鲲鹏是4字节 struct A{char a;int b;short c; };char占一个字节&#xff0c;起始偏移为零&#xff0c;int占四个字节&#xff0c;min(8,4)4&#x…

计算机毕设之基于Hadoop+springboot的物品租赁系统的设计与实现(前后端分离,内含源码+文档+教程)

该系统基于Hadoop平台&#xff0c;利用Java语言、MySQL数据库&#xff0c;结合目前流行的 B/S架构&#xff0c;将物品租赁管理的各个方面都集中到数据库中&#xff0c;以便于用户的需要。在确保系统稳定的前提下&#xff0c;能够实现多功能模块的设计和应用。该系统由管理员功能…

小白备战大厂算法笔试(六)——堆

文章目录 堆常用操作堆的实现存储与表示访问堆顶元素元素入堆元素出堆 常见应用建堆操作自上而下构建自下而上构建 TOP-K问题遍历选择排序堆 堆 堆是一种满足特定条件的完全二叉树&#xff0c;主要可分为下图所示的两种类型。 大顶堆&#xff1a;任意节点的值 ≥ 其子节点的值…

Android MeidiaCodec之OMXPluginBase与QComOMXPlugin实现本质(四十)

简介: CSDN博客专家,专注Android/Linux系统,分享多mic语音方案、音视频、编解码等技术,与大家一起成长! 优质专栏:Audio工程师进阶系列【原创干货持续更新中……】🚀 人生格言: 人生从来没有捷径,只有行动才是治疗恐惧和懒惰的唯一良药. 更多原创,欢迎关注:Android…

tomcat的优化

TOMCAT的优化 tomcat的优化主要是从三个方面进行的&#xff0c;第一个是 tomcat配置的优化第二是对JVM虚拟机的优化第三是对Linux系统内核的优化&#xff0c;配置文件中的优化主要在tomcat中server.xml文件夹内 tomcat配置文件的优化 1、 maxThreads&#xff1a; Tomcat 使用…

Java笔记:线程池

一. 正确使用ThreadPoolExecutor创建线程池 1.1、基础知识 Executors创建线程池便捷方法列表&#xff1a;下面三个是使用ThreadPoolExecutor的构造方法创建的 方法名功能newFixedThreadPool(int nThreads)创建固定大小的线程池newSingleThreadExecutor()创建只有一个线程的线…

HTML5Plus

之前写过在 vue 中使用 mui 框架的方法&#xff0c;因为用 vue 开发后打包 5App 会有一些问题&#xff0c;所以当时用到了&#xff0c;最近又一次开发移动端&#xff0c;不同的是这次使用的是 vue3 开发的&#xff0c;导致之前使用的 vue-awesome-mui 依赖不能使用了&#xff0…

java 工程管理系统源码+项目说明+功能描述+前后端分离 + 二次开发

Java版工程项目管理系统 Spring CloudSpring BootMybatisVueElementUI前后端分离 功能清单如下&#xff1a; 首页 工作台&#xff1a;待办工作、消息通知、预警信息&#xff0c;点击可进入相应的列表 项目进度图表&#xff1a;选择&#xff08;总体或单个&#xff09;项目显示…

华为OD机考算法题:分奖金

题目部分 题目分奖金难度难题目说明公司老板做了一笔大生意&#xff0c;想要给每位员工分配一些奖金&#xff0c;想通过游戏的方式来决定每个人分多少钱。按照员工的工号顺序&#xff0c;每个人随机抽取一个数字。按照工号的顺序往后排列&#xff0c;遇到第一个数字比自己数字…

YOLOv5:对yolov5n模型进一步剪枝压缩

YOLOv5&#xff1a;对yolov5n模型进一步剪枝压缩 前言前提条件相关介绍具体步骤修改yolov5n.yaml配置文件单通道数据&#xff08;黑白图片&#xff09;修改models/yolo.py文件修改train.py文件 剪枝后模型大小 参考 前言 由于本人水平有限&#xff0c;难免出现错漏&#xff0c;…

chrome_elf.dll丢失怎么办?修复chrome_elf.dll文件的方法

Chrome是目前最受欢迎的网络浏览器之一&#xff0c;然而有时用户可能会遇到Chrome_elf.dll丢失的问题。该DLL文件是Chrome浏览器的一个重要组成部分&#xff0c;负责启动和管理程序的各种功能。当Chrome_elf.dll丢失时&#xff0c;用户可能无法正常启动Chrome或执行某些功能。本…