如何在React.js中实现可横向滚动的单行图片列表

核心实现思路 #

通过CSS的overflow-x: auto让容器支持横向滚动，结合Flex布局将图片强制排成单行，同时固定容器高度避免干扰页面原有垂直滚动逻辑。

具体实现步骤 #

1. 创建React组件结构 #

编写独立的横向图片列表组件，接收图片数据数组作为props渲染列表：

import React from 'react';
import './HorizontalImageList.css';

const HorizontalImageList = ({ images }) => {
  return (
    <div className="horizontal-image-container">
      <div className="image-list">
        {images.map((img, idx) => (
          <div key={idx} className="image-item">
            <img 
              src={img.src} 
              alt={img.alt || `图片${idx+1}`} 
              className="list-image"
              loading="lazy" {/* 可选：原生图片懒加载 */}
            />
          </div>
        ))}
      </div>
    </div>
  );
};

export default HorizontalImageList;

2. 编写CSS样式 #

关键样式控制容器滚动、图片排列和尺寸：

/* 横向滚动容器 */
.horizontal-image-container {
  width: 100%;
  height: 180px; /* 固定高度，防止影响页面垂直滚动 */
  overflow-x: auto;
  padding: 10px 0;
  /* 自定义滚动条样式（可选） */
  scrollbar-width: thin;
  scrollbar-color: #888 #f5f5f5;
}

/* WebKit浏览器滚动条自定义 */
.horizontal-image-container::-webkit-scrollbar {
  height: 6px;
}

.horizontal-image-container::-webkit-scrollbar-track {
  background: #f5f5f5;
  border-radius: 3px;
}

.horizontal-image-container::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 3px;
}

.horizontal-image-container::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* 图片列表容器 */
.image-list {
  display: flex;
  flex-wrap: nowrap; /* 强制单行排列 */
  gap: 12px; /* 图片间距 */
  padding: 0 16px;
}

/* 图片项 */
.image-item {
  flex-shrink: 0; /* 禁止图片被压缩 */
}

/* 图片样式 */
.list-image {
  width: 150px;
  height: 150px;
  object-fit: cover; /* 保持图片比例，裁剪多余部分 */
  border-radius: 8px; /* 可选：圆角效果 */
}

3. 在页面中引入组件 #

在现有页面的底部位置导入并使用该组件：

import HorizontalImageList from './HorizontalImageList';

const YourPage = () => {
  // 示例图片数据，可替换为实际接口返回数据
  const imageList = [
    { src: '/images/photo1.jpg', alt: '风景图1' },
    { src: '/images/photo2.jpg', alt: '风景图2' },
    { src: '/images/photo3.jpg', alt: '风景图3' },
    // 更多图片...
  ];

  return (
    <div className="page-wrapper">
      {/* 页面原有垂直滚动内容 */}
      <div className="page-content">...</div>
      
      {/* 底部添加横向滚动图片列表 */}
      <HorizontalImageList images={imageList} />
    </div>
  );
};

export default YourPage;

可选优化方案 #

• 添加滚动控制按钮：为容器添加左右箭头按钮，通过scrollBy()方法控制横向滚动距离，提升桌面端体验。
• 自动滚动效果：使用setInterval结合scrollBy实现自动轮播，需添加鼠标悬停暂停逻辑。
• 响应式调整：通过媒体查询在小屏幕设备上缩小图片尺寸，适配不同宽度。

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