Commit d2f7b858 authored by 周宏民's avatar 周宏民

fix: 数据滚动添加swiper回调

parent d5caef1a
{ {
"name": "@wisdom-components/dataCarousel", "name": "@wisdom-components/dataCarousel",
"version": "1.1.1", "version": "1.1.2",
"description": "@wisdom-components/dataCarousel", "description": "@wisdom-components/dataCarousel",
"author": "hongmin", "author": "hongmin",
"homepage": "", "homepage": "",
......
...@@ -27,10 +27,13 @@ function Demo() { ...@@ -27,10 +27,13 @@ function Demo() {
</div> </div>
); );
}; };
const onSwiper = (swiper) => {
console.log('🚀 ~ swiper', swiper);
};
return ( return (
<div style={{ width: '100%' }}> <div style={{ width: '100%' }}>
<div style={{ width: '300px', height: '200px', background: 'rgba(0,0,0,0.2)' }}> <div style={{ width: '300px', height: '200px', background: 'rgba(0,0,0,0.2)' }}>
<DataCarousel list={list} renderItem={renderItem}></DataCarousel> <DataCarousel list={list} renderItem={renderItem} onSwiper={onSwiper}></DataCarousel>
</div> </div>
<br /> <br />
</div> </div>
......
...@@ -14,7 +14,16 @@ import 'swiper/swiper.min.css'; ...@@ -14,7 +14,16 @@ import 'swiper/swiper.min.css';
import styles from './index.less'; import styles from './index.less';
SwiperCore.use([Autoplay, Pagination, Navigation]); SwiperCore.use([Autoplay, Pagination, Navigation]);
const DataCarousel = ({ list, itemHeight, gap, renderItem, renderGap, config, autoplay }) => { const DataCarousel = ({
list,
itemHeight,
gap,
renderItem,
renderGap,
config,
autoplay,
onSwiper,
}) => {
const contentRef = useRef(null); const contentRef = useRef(null);
const [colNum, setColNum] = useState(0); const [colNum, setColNum] = useState(0);
const [listData, setListData] = useState([]); const [listData, setListData] = useState([]);
...@@ -75,6 +84,7 @@ const DataCarousel = ({ list, itemHeight, gap, renderItem, renderGap, config, au ...@@ -75,6 +84,7 @@ const DataCarousel = ({ list, itemHeight, gap, renderItem, renderGap, config, au
direction="vertical" direction="vertical"
onSlideChange={(e) => {}} onSlideChange={(e) => {}}
onSwiper={(swiper) => { onSwiper={(swiper) => {
onSwiper && onSwiper(swiper);
//鼠标悬浮暂停效果 //鼠标悬浮暂停效果
swiper.$el[0].addEventListener('mouseover', () => swiper.autoplay.stop()); swiper.$el[0].addEventListener('mouseover', () => swiper.autoplay.stop());
//鼠标移开后继续自动滚屏效果 //鼠标移开后继续自动滚屏效果
......
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