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 (<SwiperclassName={styles.navSwiper}looploopedSlides={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}><imgsrc={img?.src}onClick={() => {switchNav(img);}}/></SwiperSlide>);})}</React.Fragment>)}{hasInit && (<React.Fragment><spanslot="container-start"className={styles.navPrev}onClick={slideToPrev}><Icon name="ArrowLeft" /></span><spanslot="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;}
}