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

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

parent c10a2614
......@@ -25,6 +25,7 @@ const DataCarousel = ({
onSwiper,
}) => {
const contentRef = useRef(null);
const swiperRef = useRef(null);
const [colNum, setColNum] = useState(0);
const [listData, setListData] = useState([]);
const [height, setHeight] = useState('100%');
......@@ -55,7 +56,15 @@ const DataCarousel = ({
}, [contentRef.current?.offsetHeight, itemHeight, gap]);
useEffect(() => {
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]);
return (
......@@ -72,7 +81,7 @@ const DataCarousel = ({
<Swiper
slidesPerView={1}
autoplay={
autoplay
autoplay * 1 && listData.length > 1
? {
delay: listData.length > 1 ? autoplay : false,
disableOnInteraction: false,
......@@ -84,12 +93,13 @@ const DataCarousel = ({
direction="vertical"
onSlideChange={(e) => {}}
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 ? swiper.autoplay.start() : '';
listData.length > 1 && autoplay * 1 ? swiper.autoplay.start() : '';
});
}}
{...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