YPZZBWG/pc/src/pages/A2Main/SwiperCom/index.tsx

import React, { useCallback, useEffect, useState } from "react";
import styles from "./index.module.scss";
import { Swiper, SwiperSlide } from "swiper/react";
import classNames from "classnames";

// Import Swiper styles
import "swiper/css";
import { envUrl } from "@/utils/history";
import { A2SwType } from "@/types";
import store from "@/store";

type Props = {
  data: A2SwType[];
  type: number;
};

function SwiperCom({ data, type }: Props) {
  useEffect(() => {
    setActive(0);
  }, [type]);

  // 选中状态
  const [active, setActive] = useState(0);
  const cutAcFu = useCallback(
    (item: A2SwType) => {
      setActive(item.id);
      if (type === 1) {
        // 如果是历史，打开视频弹窗

        store.dispatch({
          type: "main/lookVideo",
          payload: {
            id: item.id,
            title: item.info?.title!,
            txt: item.info?.txt!,
          },
        });
      } else {
        window.open(item.path);
      }
    },
    [type]
  );

  // swiper实例
  // const mySwiperRef = useRef<any>(null);
  return (
    <div className={styles.SwiperCom}>
      <Swiper
        // centeredSlides={true}
        spaceBetween={0}
        slidesPerView={6}
        className={classNames(
          "SwiperComBox",
          data.length <= 6 ? "SwiperComBoxCen" : ""
        )}
        // onSwiper={(swiper) => (mySwiperRef.current = swiper)}
      >
        {data.map((v) => (
          <SwiperSlide key={v.id}>
            <div
              title={v.name}
              onClick={() => cutAcFu(v)}
              className={classNames(
                "SwiperComRow",
                active === v.id ? "SwiperComRowAc" : ""
              )}
            >
              <img src={envUrl + `/swData/${type}/${v.img}`} alt="" />
              <div className="SwiperComSm">
                <p>{v.name}</p>
              </div>
              <div className="SwiperComName">{v.name}</div>
            </div>
          </SwiperSlide>
        ))}
      </Swiper>
    </div>
  );
}

const MemoSwiperCom = React.memo(SwiperCom);

export default MemoSwiperCom;