react实现列表滚动组件功能
更新时间：2023年09月28日 11:18:50 作者：zhoupenghui168
在开发项目的时候,从服务端获取到数据列表后,展示给用户看,需要实现数据自动滚动效果,怎么实现呢,下面小编给大家分享react实现列表滚动组件功能实现代码,感兴趣的朋友一起看看吧
1.需求
在开发项目的时候，从服务端获取到数据列表后，展示给用户看：需要实现数据自动滚动效果，怎么实现呢？如下图所示：
2.实现
把上面需要实现的功能写成一个组件，页面直接调用该组件即可，代码如下：
要引入组件页面的代码：
import Scroll from "../../components/Scroll";
const Index = () => {
return (
<div class={style.main}>
<Scroll />
</div>
）
}
export default Index;组件：
import style from "./style.less";
import React, { useEffect, useRef, useState } from "react";
const Scroll = () => {
const timer = useRef(null);
//这里的数据是通过服务端api接口获取的
const marqueeList = [
{
phone: "155****1111",
content: "签到获取",
money: 12.22,
},
{
phone: "151****1111",
content: "签到获取",
money: 2,
},
{
phone: "152****1111",
content: "签到获取",
money: 2.22,
},
...
];
//是否滚动
const [isScrolle, setIsScrolle] = useState(true);
//滚动速度，值越小，滚动越快
const scrollSpeed = 100;
const warper = useRef();
//原数据
const childDom = useRef();
//拷贝数据
const childDomCopy = useRef();
//鼠标移动，移除方法
const hoverHandler = (flag) => setIsScrolle(flag);
useEffect(() => {
// 设置轮播滚动多拷贝一层，让它无缝滚动
childDom.current.innerHTML = childDomCopy.current.innerHTML;
if (isScrolle) {
if (timer.current) {
clearInterval(timer.current);
}
timer.current = setInterval(() => {
warper.current.scrollTop >= childDom.current.scrollHeight
? (warper.current.scrollTop = 0)
: warper.current.scrollTop++;
}, scrollSpeed);
}
return () => {
clearInterval(timer.current);
};
}, [isScrolle]);
return (
<div class={style.content}>
<div class={style.parent} ref={warper}>
<div class={`${style.ul_scoll}`} ref={childDomCopy}>
{marqueeList.map((value, index) => (
<li
style={{backgroundColor: index % 2 == 0 ? "#S1AAAA" : "#ABCDEF"}}
key={value}
onMouseOver={() => hoverHandler(false)}
onMouseLeave={() => hoverHandler(true)}
>
<div class={style.li_intro}>
<div>
{value.phone}
</div>
<div>
{value.content}
</div>
<div class={style.li_money_intro}>
<div class={style.li_money}>
+{value.money}
</div>
<div class={style.li_rmb}>
RMB
</div>
</div>
</div>
</li>
))}
</div>
<div class={`${style.ul_scoll}`} ref={childDomCopy}></div>
</div>
</div>
);
};
export default Scroll;css:
.content {
width: 100%;
height: 14.16rem;
overflow: hidden;
position: relative;
margin: auto;
}
.parent {
top: 1rem;
position: relative;
height: 11.16rem;
overflow: hidden;
line-height: 2.5rem;
overflow-y: scroll;
scrollbar-width: none;
-ms-overflow-style: none;
}
.parent::-webkit-scrollbar {
display: none;
}
.ul_scoll li {
width: 100%;
height: 2.5rem;
font-size: 0.9rem;
font-weight: bold;
text-align: center;
letter-spacing: 0.025rem;
line-height: 2.5rem;
color: red;
}
.li_intro {
color: #205F59;
font-weight: 930;
flex-direction: row;
align-items: center;
justify-content: space-between;
display: flex;
padding-left: 0.25rem;
padding-right: 0.25rem;
}
.li_money_intro {
display:flex;
color: #39B54A;
}
.li_oney {
font-size: 1rem;
}
.li_rmb {
color:#FF6000;
margin-left:0.8rem;
font-size: 0.8rem;
}这样就能够实现数据不停滚动了
到此这篇关于react实现列表滚动组件的文章就介绍到这了,更多相关react列表滚动组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了React Hook 监听localStorage更新问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要介绍了React项目动态设置title标题的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
当我们使用React编写组件时,组件的重新渲染是一个重要的概念,本文主要介绍了React组件在什么情况下会重新渲染,具有一定的参考价值,感兴趣的可以了解一下2023-12-12
这篇文章主要介绍了React中多语言的配置方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
在当今的前端开发中,处理文件流操作已经成为一个常见的需求,无论是上传、下载、读取、展示还是其他的文件处理操作,都需要高效且可靠地处理二进制数据,本文将深入探讨如何使用 React 实现文件分片上传和下载,并介绍相关的基本概念和技术,需要的朋友可以参考下2023-08-08
React 函数式组件与类组件的主要区别在于它们的定义和声明方式以及它们之间的一些特性,所以本文就详细的给大家讲讲React中函数式组件与类组件有何不同,需要的朋友可以参考下2023-09-09
本文主要介绍了react中事件处理与柯里化的实现，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-05-05
react函数组件useState异步,数据不能及时获取到的问题
这篇文章主要介绍了react函数组件useState异步,数据不能及时获取到的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
React 18.2.0 引入了一系列并发机制的新特性,旨在帮助各位开发者更好地控制和优化应用程序的性能和用户体验,下面我们就来看看如何利用这些新特性构建更高效、更响应式的应用程序吧2024-03-03
在使用React Native开发的时，当我们快速滑动应用的时候，可能会出现误触，导致我们会点击到页面中的某一些点击事件，误触导致页面元素响应从而进行其他操作,表现出非常不好的用户体验。2023-05-05
最新评论