react實現(xiàn)列表滾動組件功能

更新時間：2023年09月28日 11:18:50 作者：zhoupenghui168

在開發(fā)項目的時候,從服務端獲取到數(shù)據(jù)列表后,展示給用戶看,需要實現(xiàn)數(shù)據(jù)自動滾動效果,怎么實現(xiàn)呢,下面小編給大家分享react實現(xiàn)列表滾動組件功能實現(xiàn)代碼,感興趣的朋友一起看看吧

1.需求

在開發(fā)項目的時候，從服務端獲取到數(shù)據(jù)列表后，展示給用戶看：需要實現(xiàn)數(shù)據(jù)自動滾動效果，怎么實現(xiàn)呢？如下圖所示：

2.實現(xiàn)

把上面需要實現(xiàn)的功能寫成一個組件，頁面直接調用該組件即可，代碼如下：

要引入組件頁面的代碼：

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);
        //這里的數(shù)據(jù)是通過服務端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();
        //原數(shù)據(jù)
        const childDom = useRef();
        //拷貝數(shù)據(jù)
        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;
}

這樣就能夠實現(xiàn)數(shù)據(jù)不停滾動了

到此這篇關于react實現(xiàn)列表滾動組件的文章就介紹到這了,更多相關react列表滾動組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: