CSS实现表格无限轮播

<div className={styles.tableTh}>
  <div className={styles.thItem} style={{ width: '40%' }}>报警名称</div>
  <div className={styles.thItem} style={{ width: '35%' }}>开始时间</div>
  <div className={styles.thItem} style={{ width: '25%' }}>状态</div>
  </div>
     <div className={styles.tableBody} ref={scrollRef}>
        {alarmTableList.map((item, index) => {
           return (
             <div className={styles.bodyContent} key={index}>
               <div style={{ width: '40%' }}>{item?.name}</div>
               <div style={{ width: '35%' }}>{item?.time}</div>
               <div style={{ width: '25%', color: item?.status === 0 ? '#12fd00' : '#f62222' }}>{item?.status === 0 ? '报警' : '正常'}</div>
             </div>
            );
         })}
     </div>

      .tableTh {
        width: 100%;
        height: 36px;
        line-height: 36px;
        text-align: center;
        background-color: #2e3646;
        display: flex;
        justify-content: flex-start;
        .thItem {
          font-weight: bold;
          font-size: 16px;
          letter-spacing: 1px;
          color: #bae7ff;
          &:first-child {
            border-right: 1px solid #5a6477;
          }
          &:nth-child(2) {
            border-right: 1px solid #5a6477;
          }
        }
      }
      .tableBody {
        width: 100%;
        height: 86%;
        overflow: hidden;
        text-align: center;
        .bodyContent {
          font-size: 18px;
          display: flex;
          justify-content: flex-start;
          padding: 8px 0;
          &:nth-child(even) {
            background-color: #2e3646;
          }
        }
      }

  const scrollRef = useRef(null); // 用于表格滚动
  const [scrollTop, setScrollTop] = useState(0);
 const [alarmTableList, setAlarmTableList] = useState([]); // 表格数据

  // 滚动动画的函数
  const scrollAnimation = () => {
    if (scrollRef.current) {
      // 每次滚动的高度
      const step = 1;
      // 更新scrollTop的值
      setScrollTop((prevScrollTop) => {
        // 当滚动到内容底部时，重置滚动位置到顶部
        if (prevScrollTop >= scrollRef.current.scrollHeight - scrollRef.current.clientHeight) {
          return 0;
        }
        return prevScrollTop + step;
      });
    }
  };

useEffect(() => {
    const tableArr = [];
    for (let i = 1; i <= 32; i++) {
      let obj = {
        name: i + '级报警',
        time: '09:23',
        status: i % 2 === 0 ? 1 : 0, // 0：报警
      };
      tableArr.push(obj);
    }
    setAlarmTableList(tableArr);
   const intervalId = setInterval(scrollAnimation, 50); // 每50毫秒滚动一次
    return () => {
      clearInterval(intervalId); // 组件卸载时清除定时器
      autofit.off();
    };
  }, []); // 当scrollTop变化时，重新设置滚动位置

  useEffect(() => {
    if (scrollRef.current) {
      // 设置scrollRef的scrollTop属性来滚动内容
      scrollRef.current.scrollTop = scrollTop;
    }
  }, [scrollTop]); // 当scrollTop变化时，重新设置滚动位置

原文地址：https://blog.csdn.net/weixin_44068262/article/details/140658682

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！