react-swiper 如何实现滑动小卡片的移动?
1.引入插件
import ReactSwipes from 'react-swipes';
import './swiperCard.css';
2.代码构成
export default class SwiperCard extends Component {
constructor(props) {
super(props);
this.state = {
data: this.props.item,
changeEndTime: this.props.item.endTime
}
}
render() {
// swipes 的配置
let opt = {
distance: 70, // 每次移动的距离,卡片的真实宽度,需要计算
currentPoint: 0, // 初始位置,默认从0即第一个元素开始
swTouchend: (ev) => {
let data = {
moved: ev.moved,
originalPoint: ev.originalPoint,
newPoint: ev.newPoint,
cancelled: ev.cancelled
}
this.setState({
curCard: ev.newPoint
})
}
}
return(
<ReactSwipes className="card-slide" options={opt}>
{
this.props.item.subjectGoods.map((item,index)=>{}
}
</ReactSwipes>
);
}
}
作者:人参,每篇随笔皆原创(除非注明原作者的随笔),欢迎指正!