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 = 21
const itemLength = 10
// 是否开启虚拟滚动
const enableVirtualScroll = true
export 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中怎么实现虚拟滚动问题的解答就分享到这里了,希望以上内容可以对大家有一定的帮助,如果你还有很多疑惑没有解开,可以关注亿速云行业资讯频道了解更多相关知识。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。