reactjs - 如何在 MUI GridList 中实现瓦片的水平滚动？

问题描述

这是我的 JS 页面，我需要在其中实现GridList组件以显示多个图块，并且在列表大小超过屏幕限制后可以水平滚动。

import React,{ useState} from "react";
import Header from "../../common/header/Header";
import "./Home.css";
import { GridList, GridListTile, GridListTileBar} from "@material-ui/core";

const images = [
    { thumbnail: { uri: 'https://lorempixel.com/200/200/animals',name:'animals'}},
    { thumbnail: { uri: 'https://lorempixel.com/200/200/city'  ,name:'city'}},
    { thumbnail: { uri: 'https://lorempixel.com/200/200/city'  ,name:'city'}},
    { thumbnail: { uri: 'https://lorempixel.com/200/200/city'  ,name:'city'}},
    { thumbnail: { uri: 'https://lorempixel.com/200/200/nature'  ,name:'nature'} },
    { thumbnail: { uri: 'https://lorempixel.com/200/200/cats'  ,name:'cats'} },
    { thumbnail: { uri: 'https://lorempixel.com/200/200/cats'  ,name:'cats'} },
    { thumbnail: { uri: 'https://lorempixel.com/200/200/cats'  ,name:'cats'} },
  ];

export default function Home() {
  return (
    <>
      <Header></Header>
      <header className="head">Upcoming Movies</header>
        <GridList cellHeight={180} cols={6}>
            {images.map((image) => (
            <GridListTile>
                <img src={image.thumbnail.uri} />
                <GridListTileBar
                    title={ image.thumbnail.name}
                />
            </GridListTile>
            ))}
        </GridList>
    </>
  );
}

标签： reactjsmaterial-uiscrollbarhorizontal-scrolling

注意：在 MUI 的较新版本中，GridList已更改为ImageList，以下代码使用最新的 API。

您可以使用以下代码填充列而不是行：

<ImageList
  sx={{
    gridAutoFlow: "column",
    gridTemplateColumns: "repeat(auto-fill,minmax(160px,1fr)) !important",
    gridAutoColumns: "minmax(160px, 1fr)"
  }}
>
  {images.map((image) => (
    <ImageListItem>
      <img src={image.thumbnail.uri} />
      <ImageListItemBar title={image.thumbnail.name} />
    </ImageListItem>
  ))}
</ImageList>

gridAutoFlow: 'column'：如果没有剩余空间，告诉网格创建另一列而不是转到下一行。
gridTemplateColumns: 'repeat(auto-fill, minmax(160px, 1fr))': 设置列的最小和最大宽度，最小值为160px，如果空间足够（不需要水平滚动条），则将每列宽度设置为相等。
gridAutoColumns: 'minmax(160px, 1fr)'：与上面相同，但对于视口之外的列。

reactjs - 如何在 MUI GridList 中实现瓦片的水平滚动？

问题描述

解决方案

现场演示

参考

推荐阅读