react-slick逐列滑动实现求助：整组滑动改单列切换

要实现逐列滑动，核心是把每个column作为独立的滑块项（slide），而非当前的整组层级项（Junior/Mid等）。以下是具体修改方案：

关键改动点 #

1. 扁平化数据源：将原数据中的每个column提取为单独的滑块数据，同时保留所属层级的标题（如Junior、Mid）。
2. 调整滑块配置：移除variableWidth，因为每个滑块项宽度固定为306px，无需可变宽度。
3. 修改渲染逻辑：每个滑块项渲染单个列的内容，并显示对应的层级标题。

修改后的完整代码 #

import { FC, useRef } from 'react';
import Slider from 'react-slick';
import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';
import { Layout, Button } from 'antd'; // 假设使用Ant Design，可根据实际依赖调整

const mockedData = [
    {
        title: "Junior",
        columns: [{ title: "Column 1" }],
    },
    {
        title: "Mid",
        columns: [{ title: "Column 1" }, { title: "Column 2" }, { title: "Column 3" }],
    },
    {
        title: "Senior",
        columns: [{ title: "Column 1" }, { title: "Column 2" }, { title: "Column 3" }],
    },
    {
        title: "Expert",
        columns: [{ title: "Column 1" }],
    },
];

// 扁平化数据：将每个column转换为带层级标题的独立项
const flattenedSlides = mockedData.flatMap(item => 
    item.columns.map(column => ({ ...column, levelTitle: item.title }))
);

export const TestPage: FC = () => {
    const sliderRef = useRef<Slider>(null);

    const handleNext = () => {
        sliderRef.current?.slickNext();
    };

    const handlePrev = () => {
        sliderRef.current?.slickPrev();
    };

    const settings = {
        infinite: false,
        slidesToShow: 2,
        slidesToScroll: 1,
        // 移除variableWidth，改用固定宽度布局
    };

    return (
        <Layout>
            <div style={{ textAlign: "center", marginBottom: 12 }}>
                <Button onClick={handlePrev}>Previous</Button>
                <Button onClick={handleNext}>Next</Button>
            </div>
            <div className={styles.objectsContainer}>
                <Slider ref={sliderRef} {...settings} className={styles.slider}>
                    {flattenedSlides.map((slide, index) => (
                        <div
                            key={index}
                            className={styles.objectContainer}
                            style={{ width: 306 }}
                        >
                            <h2>{slide.levelTitle}</h2>
                            <div className={styles.columnContent}>
                                <p>{slide.title}</p>
                            </div>
                        </div>
                    ))}
                </Slider>
            </div>
        </Layout>
    );
};

额外说明 #

• 使用flatMap扁平化数据，能高效将嵌套的columns数组展开为一维数组，每个元素同时包含列标题和所属层级标题。
• 移除variableWidth后，滑块会基于固定宽度计算布局，确保每次滑动仅切换单个列，符合需求中的1-1-1-1-1-1...滑动顺序。
• 若需要保持层级标题的连续性（比如Mid的三个列都显示Mid标题），当前的扁平化处理已经满足需求，每个slide都会携带对应的层级标题。

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