React + Material-UI | 如何创建横向滚动卡？

Question

我正在尝试创建一个将显示 3 张卡片的 React 组件，每张卡片都包含水平数组中的一些信息。左/右按钮允许用户水平来回滚动到另外 3 张卡片，直到阵列完成。

我一直在做一些研究，但很难找到一个解决方案来轻松完成这项任务。这是我第一次使用 Material-UI，所以这一切都很新。

我可以做什么来获得我正在寻找的东西？我可以为 Material-UI 提供某种滚动功能来轻松创建这些左/右滚动按钮吗？

谢谢！

例子：

Answer 1

您需要按钮，还是只需要水平滚动？这是带有图像的水平滚动部分的简单示例：

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import GridList from '@material-ui/core/GridList';
import GridListTile from '@material-ui/core/GridListTile';
import GridListTileBar from '@material-ui/core/GridListTileBar';

const useStyles = makeStyles((theme) => ({
  root: {
    display: 'flex',
    flexWrap: 'wrap',
    justifyContent: 'space-around',
    overflow: 'hidden',
  },
  gridList: {
    flexWrap: 'nowrap'
  }
}));

const tileData = [
{
  img: 'images/image1.jpg',
  title: 'title'
},
{
  img: 'images/image2.jpg',
  title: 'title'
},
{
  img: 'images/image3.jpg',
  title: 'title'
}
];

export default function SingleLineGridList() {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <GridList className={classes.gridList} cols={2.5}>
        {tileData.map((tile) => (
          <GridListTile key={tile.img}>
            <img src={tile.img} alt={tile.title} />            
            <GridListTileBar
              title={tile.title}
            />
          </GridListTile>
        ))}
      </GridList>
    </div>
  );
}

我认为对于按钮，您需要<div>为 3 的每个部分设置 a ，并在每个按钮上设置href=#id。