React+Ant Design如何实现Card内子卡片列表横向滚动

你当前使用的Row/Col栅格组件默认开启自动换行，只要调整几个CSS属性就能实现超出指定数量后横向滚动的效果，不需要额外引入第三方依赖。

核心修改点 #

• 给Row容器关闭flex换行规则，开启横向溢出滚动
• 给每个子Col设置不缩放、不自动拉伸的固定尺寸规则，避免卡片被挤压变形

可直接复用的修改后代码 #

<Card
  style={{
    margin: "10px",
    borderRadius: "20px",
  }}
>
  <div className="titleTraining">My Training Event</div>
  <Row 
    gutter={[15, 15]}
    style={{
      flexWrap: 'nowrap',
      overflowX: 'auto',
      paddingBottom: 8, // 预留滚动条展示空间，避免遮挡卡片底部
      // 可选：优化火狐浏览器下滚动条样式
      scrollbarWidth: 'thin',
    }}
    className="horizontal-scroll-row"
  >
    {/* 实际业务中建议用数组循环渲染，不用重复写Col节点 */}
    {
      trainingList.map(item => (
        <Col key={item.id} style={{ flex: '0 0 auto' }}>
          <MyTrainingCardCom data={item} />
        </Col>
      ))
    }
  </Row>
</Card>

如果要优化Chrome、Edge等webkit内核浏览器的滚动条样式，可以补充一段全局CSS：

.horizontal-scroll-row::-webkit-scrollbar {
  height: 6px;
}
.horizontal-scroll-row::-webkit-scrollbar-thumb {
  background: #eee;
  border-radius: 3px;
}
.horizontal-scroll-row::-webkit-scrollbar-track {
  background: transparent;
}

可选适配方案 #

• 固定一屏展示4个卡片：给Col设置宽度为width: 'calc((100% - 45px)/4)'，其中45px是3个列间距总宽度（gutter为15时，4列共有3个15px的间距），不足一屏时卡片自动撑满，超出后滑动查看
• 需要带左右切换箭头的分页滑动效果：可以替换为Ant Design原生的Carousel走马灯组件，配置slidesToShow={4}属性即可实现一屏展示4个、点击箭头切换的效果，适合不需要自由连续滑动的场景
• 滚动提示效果：可以在容器右侧加半透明渐变遮罩，滚动到最右侧时自动隐藏，提示用户还有未展示的内容

内容的提问来源于stack exchange，提问作者mukubal 99