• react实现自定义hooks(跑马灯)


    实现思路

    transform+transition,setTimeout+递归实现偏移滚动

    在线预览

    react跑马灯hooks

    核心代码

    import { useState, useRef, useCallback } from "react";
    
    function useMarquee({ data, listRef, wrapRef }) {
      const [transform, setTransform] = useState("none");
      const [transition, setTransition] = useState("none");
      const durationRef = useRef();
      const delayRef = useRef();
      const countRef = useRef(0);
    
      const move = useCallback(
        (duration) => {
          let height = 0;
          const element = listRef.current?.children[0];
          height = element.offsetHeight;
          setTransform(`translateY(-${height}px)`);
          setTransition(`transform ${duration / 1000}s linear`);
        },
        [listRef]
      );
      const reset = useCallback(() => {
        countRef.current += 1;
        setTransform("none");
        setTransition("none");
      }, []);
      const start = useCallback(
        ({ delay, duration }) => {
          if (!listRef.current?.children[0] || data.length < 4) {
            return;
          }
          const viewHeight = wrapRef.current?.offsetHeight;
          const element = listRef.current?.children[0];
          const itemHeight = element.offsetHeight;
          const num = Math.floor(Number(viewHeight) / itemHeight) + 1;
          if (countRef.current >= data.length - num) {
            // return;
            countRef.current = 0;
          }
          window.clearTimeout(delayRef.current);
          delayRef.current = window.setTimeout(() => {
            move(duration);
            window.clearTimeout(durationRef.current);
            durationRef.current = window.setTimeout(reset, duration);
            start({ delay, duration });
          }, delay);
        },
        [data.length, listRef, wrapRef, move, reset]
      );
      return { start, index: countRef.current, transform, transition };
    }
    
    export default useMarquee;
    
    
  • 相关阅读:
    phonegap
    iOS8以前与iOS8使用CoreLocation定位
    phonegap调用摄像头
    js与nativede 通信
    大数据基础---Spring+Mybatis+Phoenix整合
    大数据基础---Hbase的SQL中间层_Phoenix
    大数据基础---Hbase容灾与备份
    大数据基础---Hbase协处理器详解
    大数据基础---Hbase 过滤器详解
    大数据基础---Hive数据查询详解
  • 原文地址:https://www.cnblogs.com/xingguozhiming/p/15787394.html
Copyright © 2020-2023  润新知