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>
	);
}

}

原文地址:https://www.cnblogs.com/panax/p/9367567.html