React中如何实现手势滑动, 切换轮播图图片

手势滑动, 使用onTouch事件系列
只需要监听手势滑动的x轴距离即可(如果是竖播轮播图, 就监听y轴距离)

逻辑

1. 首先, 在需要监听的div标签上面进行事件监听
2. 实现 onTouchStart onTouchMove onTouchEnd 事件逻辑

代码

1. 监听

bannerContentView() {
    let {homePage, blockInfo} = this.props
    let contentClsName = "banner-content-area"
    contentClsName = getAlignClassName(contentClsName, blockInfo.align)
    return (
      <div
        className={contentClsName}
        onTouchStart={this.handleTouchStart}
        onTouchMove={this.handleTouchMove}
        onTouchEnd={this.handleTouchEnd}
        >
       {/* 轮播图代码 */}
      </div>
    )

2. 实现监听事件的逻辑

const MIN_TOUCH_DISTENCE = 50

handleTouchStart = (e) => {
    this.startX = e.touches[0].clientX;
  }
  handleTouchMove = (e) => {
    this.endX = e.touches[0].clientX;
  }
  handleTouchEnd = (e) => {
    let distance = Math.abs(this.startX - this.endX);
    if (distance > MIN_TOUCH_DISTENCE) {
      if (this.startX > this.endX) {
        this.carousel.next()
      } else {
        this.carousel.prev()
      }
    }
  }