如何使用 React js 为图像创建虚拟滚动

Question

我的要求是什么：我的外部文件夹中有一些图像，我需要导入到组件并显示它，还必须在此处使用 Virtual Scroll 我必须显示 1 div 中的行，其中 1 行必须显示 5-6 张图像

我做了什么：我使用外部文件夹中的上下文使用图像，并在 div 和 5-6 图像的 1 行中显示图像，但我面临无法将其设置为 Virtual 的问题滚动

因为我检查了 react-virtualized 和 react-window 插件，但我不确定我的数据是如何以那种格式使用的

使用 react-tiny-virtual-list 后图像开始堆叠

下面是我的代码

class App extends React.Component{

  state={
    Response:[],

  }
  importAll(r) {
    return r.keys().map(r);
  }
  componentWillMount() {
    let data = this.importAll(require.context('./imageFolder/', false, /\.(png|jpe?g|svg)$/));
    this.setState({ Response:data})
  }





  render(){
    return(
      <div className="container" id="imagecontainer">
        <div className="viewport"> 
              {this.state.Response.map((image, index) =>    <img key={index} src={image} alt="info"></img>      )} }
           </div> 


      </div>
    )
  }


 .container {
      padding: 0% 6%;
      height: 400px;
    }
    .viewport {
      height: -webkit-fill-available;
      width: 100%;
      border: 1px solid black;
      overflow: scroll;
    }

img {
  height: 250px;
  width: 150px;
  padding: 35px;
}


After implementing React-tiny-list
 <div id="container">
      <div id="viewport">
      <VirtualList
    height='400px'
    width='100%'
    itemCount={this.state.items.length}
    itemSize={20} // Also supports variable heights (array or function getter)
    style={{padding:'20px'}}
    renderItem={({index, style}) =>
      <div key={index} style={style}> 

        <img key={index} src={this.state.items[index]} alt="info"></img>
      </div>
    }
  />
      </div>

    </div>

Answer 1

如果您在实施虚拟滚动时遇到问题，请注意导入的顺序在执行此操作时很重要，因此请注意这一点 - 它可能会导致您的问题。（旁白：有一个 npm plugin 用于实现虚拟列表。）

虚拟卷轴的导入顺序概览为：

import * as React from 'react';
import Paper from '@material-ui/core/Paper';
import {
  Grid,
  VirtualTable,
  TableHeaderRow,
} [from material ui];

import {
  your-components
} from 'your-path';

（以上为non-specific，只是粗略的排序）

如果您无法实现 "Virtual scroll"，您也可以使用 ScrollView。以下样式将为您提供水平滚动（与默认的垂直滚动相反），使您能够在 horizontally-scrollable 行

中显示图像

<ScrollView horizontal={true}>

希望对您有所帮助

Answer 2

如果你想将其显示为table，你也可以使用https://github.com/bvaughn/react-virtualized插件，你可以选择列表，也可以选择网格。根据你的要求，我建议使用砖石来自 'react-virtualized';

以下为展示示例

import React from 'react';
import {
  CellMeasurer,
  CellMeasurerCache,
  createMasonryCellPositioner,
  Masonry
} from 'react-virtualized';

import 'react-virtualized/styles.css';

var images = [];
const columnWidth = 250;
const defaultHeight = 260;
const defaultWidth = columnWidth;

const cache = new CellMeasurerCache({
  defaultHeight,
  defaultWidth,
  fixedWidth: true
})

// Our masonry layout will use 3 columns with a 10px gutter between
const cellPositioner = createMasonryCellPositioner({
  cellMeasurerCache: cache,
  columnCount: 4,
  columnWidth,
  spacer: 27
})

function cellRenderer ({ index, key, parent, style }) {
  const datum = images[index]

  const height = columnWidth  ||  defaultHeight ;

  return (
    <CellMeasurer
      cache={cache}
      index={index}
      key={key}
      parent={parent}
    >
      <div style={style}>
        <img
          src={datum}
          style={{
            height: height,
            width: columnWidth,
            display: "block"
          }}
          alt="info"
        />

      </div>
    </CellMeasurer>
  )
}


class Grid extends React.Component{

  importAll(r) {
    return r.keys().map(r);
  }
  componentWillMount() {
    images = this.importAll(require.context('../imageFolder/', false, /\.(png|jpe?g|svg)$/));
  }
  render(){
    return(
      <div  id="container">
          <div id="viewport">

             <Masonry
            cellCount={images.length}
            cellMeasurerCache={cache}
            cellPositioner={cellPositioner}
            cellRenderer={cellRenderer}
            height={400}
            width={1320}

        />
          </div>

      </div>
    )
  }
}

export default Grid;

希望这能解决您的问题

如何使用 React js 为图像创建虚拟滚动

How to create virtual scrolling for images using React js

javascript

css

reactjs

react-virtualized