react 手机端touch 图片轮播

来源：互联网发布：专业的音频软件编辑：程序博客网时间：2024/04/29 21:47
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>    );  }}
0 0