VirtualScroll（列表）與動態項目高度滾動不平滑和跳躍

我一直在調整VirtualScroll（列表）組件幾乎整天，但沒有運氣。VirtualScroll（列表）與動態項目高度滾動不平滑和跳躍

我正在構建一個基於Web的聊天應用程序，其中使用react-virtualized List來顯示聊天消息。由於消息可能具有不同的內容和不同的高度，因此我使用react-measure來計算項目高度並在rowRenderer中發佈重新計算RowHeights。

結果很糟糕，每當我停止滾動時，VirtuallScroll List都會跳轉。例如，當我滾動到瀏覽器的一半時，我應該看到消息的中間部分，但它總是突然改變偏移量。請看看錄製的視頻： https://drive.google.com/file/d/0B_W64UoqloIkcm9oQ08xS09Zc1k/view?usp=sharing

由於我只使用了列表和AUTOSIZER成分，我只能適應所需的css文件到我的項目是一樣 ```

.VirtualScroll { 
    width: 100%; 
    outline: none; 
}

` ``

對於渲染方法，我嵌套很多rowRender內部柔性部件組成：以下是代碼：

```

render() { 
    const inChat = this.context.store.getState().inChat; 
    const {conversationList} = this.state; 
    const imgUrl = 'img/builtin-wallpaper-1.jpg'; 
    const backgroundStyle = { 
     backgroundImage: 'url(' + imgUrl + ')', 
     backgroundRepeat: 'no-repeat', 
     backgroundSize: 'cover', 
     backgroundPosition: 'top left' 
    }; 

    if (inChat.id === this.id && inChat.status === 'FETCHING'){ 
     return (
       <Box column center height="80%"> 
        <CircularProgress /> 
       </Box> 
     ); 
    } else if (inChat.id === this.id && inChat.status === 'FETCHED'){ 
     return (
       <Box column flex="1 0 100%" style={backgroundStyle}> 
        <HorizontalToolBar/> 
        <AutoSizer disableHeight={true}> 
         {({ width }) => (
           <List 
             ref={(element) => {this.VirtualScroll = element;}} 
             className='VirtualScroll' 
             height={window.innerHeight - toolbarHeight - textAreaHeight} 
             overscanRowCount={10} 
             noRowsRenderer={this._noRowsRenderer.bind(this)} 
             rowCount={conversationList.length} 
             rowHeight={i => { 
            return (Measured_Heights[i.index] | 20); // default Height = 58 
           }} 
             rowRenderer={this._rowRenderer} 
             scrollToIndex={undefined} // scroll to latest item 
             width={width} 
           /> 
         )} 
        </AutoSizer> 
        <InputControl chatId={this.id} sendChatText={this._sendChatText.bind(this)}/> 
       </Box> 
     ); 
    } else { 
     return null; 
    } 
} 

_rowRenderer ({ index, key, style, isScrolling }) { 
    console.log(Measured_Heights); 

    const rowData = this._getDatum(index); 
    // let renderItem; 

    // console.log('index = ' + index + ' key = ' + key); 

    if (rowData.type == 'conversation') { 

     if (rowData.data.type == netModule.TYPE_SYSTEM) { 
      // system message 
      return (
        <Measure key={key} onMeasure={(dims) => this._onMeasure(index, dims)}> 
         <SystemMessage data={rowData.data}/> 
        </Measure> 
      ) 
     } 

     if (rowData.data.senderId == this.state.selfProfile.username) { 
      // outgoing message 
      return (
        <Measure key={key} onMeasure={(dims) => this._onMeasure(index, dims)}> 
         <RightMessage 
           screenWidth={(window.innerWidth - leftToolBarWidth)/2 } 
           screenHeight={window.innerHeight - toolbarHeight} 
           data={rowData.data}/> 
        </Measure> 
      ); 

     } else { 
      // incoming message 
      // append userProfile to left messages 
      return (
        <Measure key={key} onMeasure={(dims) => this._onMeasure(index, dims)}> 
         <LeftMessage 
           userId={rowData.data.senderId} 
           userProfile={this.state.groupUserProfiles[rowData.data.senderId]} 
           screenWidth={(window.innerWidth - leftToolBarWidth)/2 } 
           screenHeight={window.innerHeight - toolbarHeight} 
           data={rowData.data}/> 
        </Measure> 
      ); 
     } 
    } 
}

```

我看過一些文檔是Flexbox的可能是攔截滾動事件，但即使我加入溢出-Y：隱藏嵌套組成，我沒有看到這個問題消失。你有沒有見過這種錯誤的滾動行爲與List組件之前？

任何建議是值得歡迎的。

來源

2016-09-30 Ellis Shen

我看不到視頻，但我想我最近有類似的東西。從我所看到的，你沒有使用傳入你的_rowRenderer方法的style參數。此參數包含一些CSS變換，這些變換使行顯示在滾動列表的右側垂直位置。

來源

2016-11-29 21:42:06 fauxparse

VirtualScroll（列表）與動態項目高度滾動不平滑和跳躍

回答

相關問題