[React] 손글씨 가상화 무한 스크롤 구성 요소

전언

의 원리

스크롤 막대가 나타납니다.

가시 영역의 원활한 이동

플래시 화면 최적화

효과

코드

            <Virtualize itemHeight={rootSize*(4.5596)} columnNumber={2}
                insightNumber={6} startHeight={rootSize*6}
                scrollDom={document.querySelector('.home-main-container')}
            >
            {
                props.renderProduct.productList.map((item:Product,index:number)=>{
                  return (                     
                        <Link key={item.id} to={{pathname:`/productdetail/${item.id}`,state:item}}
                        >
                        <Card
                            hoverable
                            key={item.id}
                            cover={
                             <div  data-src={item.poster}
                             className='list-item'
                             ref={(ref)=>{
                                if(ref){
                                    io!.observe(ref)
                                }}}                              
                             >
                                <Icon type="picture"></Icon>
                             </div>                                                        
                            }
                        ><Card.Meta title={item.title} description={`  ：${item.price} `} />
                        </Card>
                        </Link>
                    )                 
                  })
            }
           </Virtualize>

type Props = PropsWithChildren<{
    itemHeight:number//     
    columnNumber:number//      
    insightNumber:number//         
    startHeight:number//           
    scrollDom:HTMLDivElement|null //     dom
    scaleRow?:number//    
}>

function  Virtualize(props:Props){
    const [costomHeight,setCostomHeight]=useState()
    const [visbleHeight,setVisibleHeight]=useState()
    const [renderChildren,setRenderChildren]=useState()
    const [indexNumber,setIndexNumber]=useState({
        startIndex:0,
        endIndex:props.insightNumber,
        overScroll:0
    })
    const [scaleRow,setScaleRow]=useState(2)
    useEffect(()=>{
        if(props.children instanceof Array){
            let childrenLen = props.children.length
            if(childrenLen%props.columnNumber!=0){//        
                let remain = childrenLen%props.columnNumber
                childrenLen=childrenLen+remain
            }
            let fullheight = childrenLen/props.columnNumber*props.itemHeight
            setCostomHeight(fullheight)
            let insightHeight
            if(childrenLen<props.insightNumber){
                insightHeight = fullheight
            }else{
                insightHeight = props.insightNumber/props.columnNumber*props.itemHeight
            }
            setVisibleHeight(insightHeight)
            setRenderChildren(props.children.slice(indexNumber.startIndex,indexNumber.endIndex))
        }
    },[props.children,indexNumber])
    const scrollFunc=(e:Event)=>{
        let target= e.target as HTMLDivElement
        let overScroll = target.scrollTop-props.startHeight//    
        let timer = overScroll/props.itemHeight*props.columnNumber
        let startIndex =Math.floor(timer)//      0  
        startIndex = startIndex<0?0:startIndex;
        timer = timer%props.columnNumber/props.columnNumber//       
        if(timer<0)timer=0;
        if(overScroll<0)overScroll=0
        if(startIndex%props.columnNumber!=0){//     
            startIndex=startIndex-startIndex%props.columnNumber
        }
        let endIndex = startIndex+props.insightNumber+scaleRow
        overScroll=overScroll-timer*props.itemHeight
        setTimeout(() => {
            setIndexNumber({
                startIndex,
                endIndex,
                overScroll
            })
        });
      
    }
    useEffect(()=>{
        props.scaleRow?setScaleRow(props.scaleRow):null;
        if(props.scrollDom)
        props.scrollDom.addEventListener('scroll',throttle(scrollFunc,50))
        return ()=>{
            if(props.scrollDom)
            props.scrollDom.removeEventListener('scroll',throttle(scrollFunc,50))
        }
    },[])
    return (
       <>
       <div style={{display:'flex'}}>
       <div style={{height:costomHeight?costomHeight:0,backgroundColor:'red',width:'20px'}} ></div>
       <div className='virtual-custom-item' 
       style={{
           height:visbleHeight?visbleHeight:0,
           position:"relative",
           transform:`translate3d(0px, ${indexNumber.overScroll}px, 0px)`
        }}>
       {renderChildren}
       </div>
       </div>
     
       </>
    )
}
export default Virtualize

넓히다