Commit 8b2770f0 authored by 周宏民's avatar 周宏民

fix: 数据列表轮播优化,数据只有一页时,停止滚动

parent c10a2614
...@@ -25,6 +25,7 @@ const DataCarousel = ({ ...@@ -25,6 +25,7 @@ const DataCarousel = ({
onSwiper, onSwiper,
}) => { }) => {
const contentRef = useRef(null); const contentRef = useRef(null);
const swiperRef = useRef(null);
const [colNum, setColNum] = useState(0); const [colNum, setColNum] = useState(0);
const [listData, setListData] = useState([]); const [listData, setListData] = useState([]);
const [height, setHeight] = useState('100%'); const [height, setHeight] = useState('100%');
...@@ -55,7 +56,15 @@ const DataCarousel = ({ ...@@ -55,7 +56,15 @@ const DataCarousel = ({
}, [contentRef.current?.offsetHeight, itemHeight, gap]); }, [contentRef.current?.offsetHeight, itemHeight, gap]);
useEffect(() => { useEffect(() => {
if (colNum) { if (colNum) {
setListData(spliceArr(list, colNum) || []); const arr = spliceArr(list, colNum) || [];
if (swiperRef.current) {
if (arr.length > 1 && autoplay * 1) {
swiperRef.current.autoplay.start();
} else {
swiperRef.current.autoplay.stop();
}
}
setListData(arr);
} }
}, [list, colNum]); }, [list, colNum]);
return ( return (
...@@ -72,7 +81,7 @@ const DataCarousel = ({ ...@@ -72,7 +81,7 @@ const DataCarousel = ({
<Swiper <Swiper
slidesPerView={1} slidesPerView={1}
autoplay={ autoplay={
autoplay autoplay * 1 && listData.length > 1
? { ? {
delay: listData.length > 1 ? autoplay : false, delay: listData.length > 1 ? autoplay : false,
disableOnInteraction: false, disableOnInteraction: false,
...@@ -84,12 +93,13 @@ const DataCarousel = ({ ...@@ -84,12 +93,13 @@ const DataCarousel = ({
direction="vertical" direction="vertical"
onSlideChange={(e) => {}} onSlideChange={(e) => {}}
onSwiper={(swiper) => { onSwiper={(swiper) => {
swiperRef.current = swiper;
onSwiper && onSwiper(swiper); onSwiper && onSwiper(swiper);
//鼠标悬浮暂停效果 //鼠标悬浮暂停效果
swiper.$el[0].addEventListener('mouseover', () => swiper.autoplay.stop()); swiper.$el[0].addEventListener('mouseover', () => swiper.autoplay.stop());
//鼠标移开后继续自动滚屏效果 //鼠标移开后继续自动滚屏效果
swiper.$el[0].addEventListener('mouseleave', () => { swiper.$el[0].addEventListener('mouseleave', () => {
listData.length > 1 && autoplay ? swiper.autoplay.start() : ''; listData.length > 1 && autoplay * 1 ? swiper.autoplay.start() : '';
}); });
}} }}
{...config} {...config}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment