React Swiper轮播图（二）

目录

• React Swiper轮播图（一）
• React Swiper轮播图（二）

需求

• 实现React可切换轮播图
• 效果预览
  

使用库

• swiper官网 https://swiperjs.com/react
• npm i swiper@6.5.0 --save

实现方法

/** 导航 */
import React, { useState } from "react";
import SwiperCore, { Navigation, Pagination, Autoplay, Thumbs } from "swiper";
import { Swiper, SwiperSlide } from "swiper/react";
import Icon from "./component/icon";
import LazyImage from "./component/lazyImage";
import { navCategoryImgs, navStyleImgs } from "./imgs";

import {
  NavType,
  NavImgType,
  QueryType,
} from "./types";

import styles from "./index.less";
import "swiper/swiper-bundle.css";

SwiperCore.use([Navigation, Pagination, Autoplay, Thumbs]);

interface IProps {
  query?: QueryType;
  onSwitchNav?: (navInfo: NavImgType) => void;
}
function NavSwiper(props: IProps): JSX.Element {
  const [swiper, setSwiper] = useState<SwiperCore | null>(null);
  const [activeIndex, setActiveIndex] = useState<number>(0);
  const [hasInit, setHasInit] = useState<boolean>(false);

  const { by, option } = props?.query || {};
  let navImgs: NavImgType[] = [];
  switch (by) {
    case NavType.category:
      navImgs = navStyleImgs.concat(navCategoryImgs);
      break;
    case NavType.style:
    default:
      navImgs = navCategoryImgs.concat(navStyleImgs);
      break;
  }

  // 上一屏
  function slideToNext() {
    swiper?.slideNext();
  }

  // 下一屏
  function slideToPrev() {
    swiper?.slidePrev();
  }

  // 点击类目
  function switchNav(navInfo: NavImgType) {
    props?.onSwitchNav && props.onSwitchNav(navInfo);
  }

  return (
    <Swiper
      className={styles.navSwiper}
      loop
      loopedSlides={5}
      slidesPerView={5}
      slidesPerGroup={5}
      spaceBetween={16}
      onSlideChange={(swiper) => setActiveIndex(swiper?.activeIndex)}
      onSwiper={(swiper) => setSwiper(swiper)}
      onInit={() => setHasInit(true)}
    >
      {!hasInit ? (
        <LazyImage className={styles.navLoading} />
      ) : (
        <React.Fragment>
          {navImgs.map((img, key) => {
            return (
              <SwiperSlide key={key} className={styles.navSlide}>
                <img
                  src={img?.src}
                  onClick={() => {
                    switchNav(img);
                  }}
                />
              </SwiperSlide>
            );
          })}
        </React.Fragment>
      )}
      {hasInit && (
        <React.Fragment>
          <span
            slot="container-start"
            className={styles.navPrev}
            onClick={slideToPrev}
          >
            <Icon name="ArrowLeft" />
          </span>
          <span
            slot="container-end"
            className={styles.navNext}
            onClick={slideToNext}
          >
            <Icon name="ArrowRight" />
          </span>
        </React.Fragment>
      )}
    </Swiper>
  );
}

export default NavSwiper;

.navSwiper {
  user-select: none;
  .navLoading {
    width: 100%;
    height: 160px;
  }
  .navSlide {
    width: 227px;
    height: 160px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    &:hover {
      opacity: 0.9;
    }
  }
  .navPrev,
  .navNext {
    position: absolute;
    top: 56px;
    width: 24px;
    height: 48px;
    text-align: center;
    font-size: 24px;
    line-height: 46px;
    color: #aaaaaa;
    background: rgba(0, 0, 0, 0.2);
    z-index: 2;
    cursor: pointer;
    &:hover {
      opacity: 0.9;
    }
  }
  .navPrev {
    left: 0;
  }
  .navNext {
    right: 0;
  }
}