/* * @Title:数据列表轮播组件 * @Author: hongmye * @Date: 2023-02-08 16:03:42 */ import PandaEmpty from '@wisdom-components/empty'; import classNames from 'classnames'; import React, { useEffect, useRef, useState } from 'react'; import 'swiper/components/navigation/navigation.min.css'; import 'swiper/components/pagination/pagination.min.css'; import SwiperCore, { Autoplay, Mousewheel, Navigation, Pagination } from 'swiper/core'; import { Swiper, SwiperSlide } from 'swiper/react'; import 'swiper/swiper.min.css'; import styles from './index.less'; SwiperCore.use([Autoplay, Pagination, Navigation, Mousewheel]); const DataCarousel = ({ list, itemHeight, renderItem, config, autoplay, onSwiper, showEmpty = true }) => { const autoplayConfig = { delay: autoplay, disableOnInteraction: false, }; const contentRef = useRef(null); const swiperRef = useRef(null); const [listData, setListData] = useState([]); useEffect(() => { setListData(list); }, [list]); return ( <div className={classNames(styles.dataCarousel, 'dataCarousel')} style={{ width: '100%', height: '100%' }} ref={contentRef} > <div className={classNames(styles.dataCarouselSwiper)} style={{ width: '100%', height: '100%' }}> {listData && listData.length ? ( <Swiper slidesPerView="auto" autoplay={autoplay * 1 && listData.length > 1 ? autoplayConfig : false} loop height={itemHeight} direction="vertical" onSlideChange={e => {}} mousewheel onSwiper={swiper => { swiperRef.current = swiper; onSwiper && onSwiper(swiper); // 鼠标悬浮暂停效果 swiper.$el[0].addEventListener('mouseover', () => swiper.autoplay.stop()); // 鼠标移开后继续自动滚屏效果 swiper.$el[0].addEventListener('mouseleave', () => { listData.length > 1 && autoplay * 1 ? swiper.autoplay.start() : ''; }); }} {...config} > {listData.map((item, index) => ( <SwiperSlide key={index} virtualIndex={index} onClick={() => {}}> {renderItem(item, index + 1)} </SwiperSlide> ))} </Swiper> ) : showEmpty ? ( <div style={{ paddingTop: 10 }}> <PandaEmpty /> </div> ) : null} </div> </div> ); }; export default DataCarousel;