react 手机端touch 图片轮播

import React, { Component, PropTypes } from 'react';

const styles = require('./DoctorSchedulesCard.scss');

let startX;
export default class DoctorSchedulesCard extends Component {
static propTypes = {
doctorSchedules: PropTypes.array,
}

constructor(props) {
super(props);
this.state = {
touchIndex: 0, // 当前未隐藏div索引值
};
}

componentDidMount() {
// this.props.loadScheduleByDoctorName();
}

componentWillReceiveProps() {
}

touchStart(event) {
startX = event.changedTouches[0].pageX;
}

// 因为无论move 还是start 都会触发end事件。所以判断方向就在end事件中
touchEnd(event, index) {
event.preventDefault();
const endX = event.changedTouches[0].pageX;
if (endX - startX > 20) {
// alert('点击左');
this.clickLeft(index);
} else if (startX - endX > 20) {
// alert('点击右');
this.clickRight(index);
}
}

clickLeft(indexParam) {
const allItemCounts = 3; // 总共轮播个数
const index = indexParam || this.state.touchIndex;
console.log(index);
this.setState({
touchIndex: index === 0 ? allItemCounts : index - 1,
});
}

clickRight() {
const allItemCounts = 3; // 总共轮播个数
const index = this.state.touchIndex;
this.setState({
touchIndex: index === allItemCounts ? 0 : index + 1,
});
}

render() {
const {touchIndex} = this.state;
return (
<div className={'list ' + styles.doctorSchedulesCardPage}>
<div onClick={() => this.clickLeft()}>left</div>
<div onClick={() => this.clickRight()}>right</div>
<ul>
<li onTouchStart={this.touchStart.bind(this)}
onTouchEnd={(event) => this.touchEnd(event, 0)}
style={{display: touchIndex === 0 ? 'block' : 'none'}}>第0张</li>
<li onTouchStart={this.touchStart.bind(this)}
onTouchEnd={(event) => this.touchEnd(event, 1)}
style={{display: touchIndex === 1 ? 'block' : 'none'}}>第1张</li>
<li onTouchStart={this.touchStart.bind(this)}
onTouchEnd={(event) => this.touchEnd(event, 2)}
style={{display: touchIndex === 2 ? 'block' : 'none'}}>第2张</li>
<li onTouchStart={this.touchStart.bind(this)}
onTouchEnd={(event) => this.touchEnd(event, 3)}
style={{display: touchIndex === 3 ? 'block' : 'none'}}>第3张</li>
</ul>
</div>
);
}
}