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

Posted 2023-02-22

【中文标题】React + Material-UI |如何创建水平滚动卡片？

【英文标题】：React + Material-UI | How to create horizontal scroll cards?

【发布时间】：2020-11-10 08:42:32

【问题描述】：

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

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

我可以做些什么来获得我正在寻找的东西？是否可以为 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代码解释一下。