1、yarn add react-swipe@5.1.1
2、import ReactSwipe from 'react-swipe';
3、<ReactSwipe></ReactSwipe>
4、 swipes的配置
let opt = {
auto: 1000,
autoPlay: true, 是否开启自动播放
currentPoint: 1, 初始位置,默认从0即第一个元素开始
distance: 620, // 每次移动的距离,卡片的真实宽度
}
render() {
let opt = {
auto: 1000,
}
return (
<div className="card-swipe" >
<ReactSwipe className="card-slide" swipeOptions={opt}>
<div><img src="http://p0.meituan.net/movie/6309046b820ed1de6971d8fe19d3c3d892027.jpg" alt=""/> </div>
<div><img src="http://p0.meituan.net/movie/b06492e646a61c9bce9f08dc0f058c02151482.jpg" alt=""/></div>
<div><img src="http://p0.meituan.net/movie/b64e58008e4883490cf60b466b75e595103754.jpg" alt=""/></div>
this.state.card.length && this.state.card.map((item, index) => <div className="item" key={index}> </div>
</ReactSwipe>
</div>
)
}
网友评论