溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
react中怎么實現虛擬滾動，針對這個問題，這篇文章詳細介紹了相對應的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。
import ReactDOM from 'react-dom'import React, { useState, useMemo } from 'react'function getData(length = 10000) {const arr = []var i = 0while (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 (<><inputonChange={v => {const next = data.filter(value => {return value.includes(v.target.value)})setList(next)}}/><divonScroll={event => {if (!enableVirtualScroll) {return}var { scrollTop } = event.targetsetScroll(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進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
