1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51
| import useVirtualList from './useVirtualList' import { useRef } from 'react'
const Section = (props: any) => { const ref = useRef(null) const entry = useVirtualList(ref, {}) const isVisible = !!entry?.isIntersecting var imgUrlArr = [ "https://i.loli.net/2019/12/25/Fze9jchtnyJXMHN.jpg", "https://i.loli.net/2019/12/25/ryLVePaqkYm4TEK.jpg", "https://i.loli.net/2019/12/25/gEy5Zc1Ai6VuO4N.jpg", "https://i.loli.net/2019/12/25/d6QHbytlSYO4FBG.jpg", "https://i.loli.net/2019/12/25/6nepIJ1xTgufatZ.jpg", "https://i.loli.net/2019/12/25/E7Jvr4eIPwUNmzq.jpg", "https://i.loli.net/2019/12/25/mh19anwBSWIkGlH.jpg", "https://i.loli.net/2019/12/25/2tu9JC8ewpBFagv.jpg", ]; console.log(`Render Section ${props.title}`, { isVisible }) return ( <div ref={ref} style={{ minHeight: '10vh', display: 'flex', border: '1px dashed #000', fontSize: '2rem', width: '100%' }} > { isVisible ? ( <div style={{ margin: 'auto', textAlign: 'center' }}> <h1>This is the {props.title} girl</h1> <img src={imgUrlArr[(0 | Math.random() * 7)]} style={{ width: '100%', height: '100%' }} /> </div> ) : "" } </div> ) } export default function IndexPage() { return ( <> { Array.from({ length: 100 }).map((_, index) => ( <Section key={index + 1} title={`${index + 1}`} /> )) } </> ); }
|