ant-design-mobile-Tabs纵向滑动触发切换tab问题解决方式

1、issues

在使用这个组件的时候同样遇到了这个问题，也就是纵向滑动的时候会触发到tab切换事件，研究过许多办法，都没有解决，最终决定将原有组件的滑动去掉，自己去实现一个滑动切换tab效果。

2、

给相应的标签注册Touch事件，通过触摸事件开始、移动、结束可以自己控制左右滑动间距，去减少上下滑动所带来的误触。

 onTouchStart = e => {
    this.startX = e.touches[0].clientX;
  };

  onTouchMove = e => {
    this.endX = e.touches[0].clientX;
  };

  onTouchEnd = () => {
    const { isCreateShow } = this.state;
    if (!isCreateShow) {
      return;
    }
    // 获取滑动范围
    if (this.startX > -1 && this.endX > -1) {
      const distance = Math.abs(this.startX - this.endX);
      if (distance > 120) {
      
        const { initialPage } = this.state;
        if (this.startX > this.endX) {
          if (initialPage !== 3) {
            const newPage = initialPage + 1;
            this.setState({
              initialPage: newPage,
            });
            this.handleTabChange('', newPage);
          }
        } else if (initialPage !== 0) {
          const newPage = initialPage - 1;
          this.setState({
            initialPage: newPage,
          });
          this.handleTabChange('', newPage);
        }
      }
    }

    this.startX = -1;
    this.endX = -1;
  };