react中怎么实现虚拟滚动
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 = 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 ( <> onChange={v => { const next = data.filter(value => { return value.includes(v.target.value) }) setList(next) }} /> 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' }}> {(enableVirtualScroll ? options : list).map((v, index) => { return ( {v} ) })}
)}
ReactDOM.render(, document.getElementById('root')) 关于react中怎么实现虚拟滚动问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注创新互联行业资讯频道了解更多相关知识。
网站名称：react中怎么实现虚拟滚动
本文URL：
http://bzwzjz.com/article/jjhsgi.html
