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大屏可视化脚手架教程示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-06-06
我们在做前端表单提交时，经常会遇到要对表单中的数据进行校验的问题。这篇文章主要介绍了js中自定义react数据验证组件 ,需要的朋友可以参考下2018-10-10
这篇文章主要介绍了React Hook四种组件优化总结，文章围绕主题展开详细的内容介绍，具有一定的参考价孩子，需要的朋友可以参考一下2022-07-07
简单说React.memo()是通过校验props中的数据是否改变的来决定组件是否需要重新渲染的一种缓存技术,下面这篇文章主要给大家介绍了关于如何快速学会react中useMemo的相关资料,需要的朋友可以参考下2022-12-12
这篇文章主要为大家介绍了React Fiber构建beginWork源码解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-02-02
这篇文章主要介绍了react中使用useEffect及踩坑记录，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要为大家详细介绍了react实现原生下拉刷新，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
这篇文章主要介绍了使用React Native创建以太坊钱包，实现转账等功能，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-07-07
在React中,通过自定义Hook useTimeHook实现定时器的启动与清除,在App组件中使用Clock组件展示当前时间,利用useEffect钩子在组件挂载时启动定时器,同时确保组件卸载时清除定时器,避免内存泄露,这种方式简化了状态管理和副作用的处理2024-10-10
这篇文章主要介绍了React路由参数传递与嵌套路由的实现，嵌套路由原则是可以无限嵌套，但是必须要让使用二级路由的一级路由匹配到，否则不显示，需要的朋友可以参考一下2022-09-09
最新评论