React + Material-UI |如何创建水平滚动卡片？答案

【问题标题】：React + Material-UI | How to create horizontal scroll cards?React + Material-UI |如何创建水平滚动卡片？
【发布时间】：2020-11-10 08:42:32
【问题描述】：

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

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

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

谢谢！

示例：

【问题讨论】：

标签： node.js reactjs material-ui

【解决方案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>
  );
}

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

【讨论】：

@alex 我正在寻找完全相同的东西，您是否找到任何解决该问题的方法，请更新？

【解决方案2】：

您可以使用下面的代码来完成它。我已经使用了一些 CSS 属性来使其工作。这将移除额外使用的箭头来水平滚动。

我在 Netflix 克隆应用中使用过它。这是一个行组件。我在我的主页中使用了它，并将不同类型的电影列表传递给它。根据类型，它将连续显示不同的电影。

 <div className="row">
  {/* title */}
  <h2>{title}</h2>
  {/* container -> posters */}
  <div className="row__posters">
    {/* several row posters */}
    {movies.map((movie) => (
      <img
        key={movie.id}            
        className="row__poster row__posterLarge"
        src={`${image_base_url}${
          isLargeRow ? movie.poster_path : movie.backdrop_path
        }`}
        alt={movie.name}
      />
    ))}
  </div>
</div>

以下是用于上述组件的 CSS。

.row {
  margin-left: 20px;
  color: white;
}

.row__posters {
  display: flex;
  overflow-x: scroll;
  overflow-y: hidden;
  padding: 20px;
}

.row__posters::-webkit-scrollbar {
  display: none;
}

.row__poster {
  width: 100%;
  object-fit: contain;
  max-height: 100px;
  margin-right: 10px;
  transition: transform 450ms;
}

.row__posterLarge {
  max-height: 250px;
}

.row__posterLarge:hover {
  transform: scale(1.09);
}

.row__poster:hover {
  transform: scale(1.08);
}

【讨论】：

【解决方案3】：

也许您可以尝试使用这样的库：

react-material-ui-carousel

不要将图像放入此组件，而是尝试放入卡片。

【讨论】：

请用sn-p代码解释一下。