react中怎么实现虚拟滚动,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。
import ReactDOM from 'react-dom'import React, { useState, useMemo } from 'react'function getData(length = 10000) { const arr = [] var i = 0 while (i < length) { arr.push(String(i++)) } return arr}const data = getData()const itemHeight = 21const itemLength = 10// 是否开启虚拟滚动const enableVirtualScroll = trueexport default function App() { let [list, setList] = useState(data) const [offset, setOffset] = useState(0) const [scroll, setScroll] = useState(0) const options = useMemo(() => { return list.length ? list.slice(offset, offset + itemLength) : ['暂无数据'] }, [offset, list]) return ( <> <input onChange={v => { const next = data.filter(value => { return value.includes(v.target.value) }) setList(next) }} /> <div onScroll={event => { if (!enableVirtualScroll) { return } var { scrollTop } = event.target setScroll(scrollTop) setOffset(~~(scrollTop / itemHeight)) }} style={{ height: `${options.length > itemLength ? itemHeight * itemLength : options.length * itemHeight}px`, overflowY: 'scroll', border: '1px solid black', marginTop: '10px' }}> <ul style={{ height: `${list.length * itemHeight}px`, position: 'relative', listStyleType: 'none', margin: '0px' }}> {(enableVirtualScroll ? options : list).map((v, index) => { return ( <li style={enableVirtualScroll ? { position: 'absolute', top: `${index * itemHeight + scroll}px` } : {}} key={index}> {v} </li>) })} </ul> </div> </> )}ReactDOM.render(<App />, document.getElementById('root'))
关于react中怎么实现虚拟滚动问题的解答就分享到这里了,希望以上内容可以对大家有一定的帮助,如果你还有很多疑惑没有解开,可以关注亿速云行业资讯频道了解更多相关知识。
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。
原文链接:https://my.oschina.net/u/4217331/blog/4379385