react中怎么實(shí)現(xiàn)虛擬滾動(dòng)
react中怎么實(shí)現(xiàn)虛擬滾動(dòng)，針對(duì)這個(gè)問(wèn)題，這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問(wèn)題的小伙伴找到更簡(jiǎn)單易行的方法。
創(chuàng)新互聯(lián)建站堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：成都網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的寧遠(yuǎn)網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！
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// 是否開(kāi)啟虛擬滾動(dòng)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) : ['暫無(wú)數(shù)據(jù)'] }, [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')) 關(guān)于react中怎么實(shí)現(xiàn)虛擬滾動(dòng)問(wèn)題的解答就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，如果你還有很多疑惑沒(méi)有解開(kāi)，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道了解更多相關(guān)知識(shí)。
網(wǎng)頁(yè)名稱：react中怎么實(shí)現(xiàn)虛擬滾動(dòng)
文章源于：
http://weahome.cn/article/jjhsgi.html
重慶分公司
重慶分公司
