React 타 오 바 오 tab 중앙 전환 효과 와 유사 한 예제 코드 구현

효과.
 
DOM 레이아웃

const label = {
 lettersort: false,
 paramname: "label",
 paramid: 0,
 title: "       ",
 option: [{
   value: 1,
   text: "  "
  },
  {
   value: 2,
   text: "    "
  },
  {
   value: 3,
   text: "    "
  },
  {
   value: 4,
   text: "    "
  },
  {
   value: 5,
   text: "    "
  },
  {
   value: 6,
   text: "    "
  },
  {
   value: 7,
   text: "    "
  },
  {
   value: 8,
   text: "    "
  },
  {
   value: 9,
   text: "    "
  },
  {
   value: 10,
   text: "    "
  },
  {
   value: 11,
   text: "    "
  },
  {
   value: 12,
   text: "    "
  },
  {
   value: 13,
   text: "    "
  },
  {
   value: 14,
   text: "    "
  }
 ]
}
filterDom = () => {
  let filterJson = label;
  let arr = filterJson.option;
  return (
    <div ref="filterBar" className="filter-list">
      {arr.map((item, index) => {
        if (item.value == this.state.filterSelect) {
          return (
            <div
              ref={item.value}
              className="filter-item active"
              key={index}
              value={item.value}>
              {item.text}
              <div className="zhishi"></div>
            </div>
          );
        } else {
          return (
            <div
              className="filter-item"
              onClick={() => {
                this.filterBarClick(item);
              }}
              ref={item.value}
              key={index}
              value={item.value}>
              {item.text}
            </div>
          );
        }
      })}
    </div>
  );
};
render(){
 return(
  <div>
   ...
   <div className="filter-content" style={{ display: this.state.filterBarShow }}>
     {this.filterDom()}
     <div className="shadow"></div>
     {/*       */}
     <div
       className="filte-btn-content"
       onClick={() => {
         this.filterBtnClick();
       }}>
       <div className="filte-btn"></div>
     </div>
   </div>
   ...
  </div>
 )
}

scss 스타일 시트

.filter {
 width: 100%;
 // position: fixed;
}
.filter-content {
  overflow: hidden;
  padding-right: pxToRem(27px);
  position: relative;
  background: #fff;
  .filter-list {
    display: flex;
    overflow-x: auto;
    justify-content: space-between;
    height: pxToRem(90px);
    color: #333333;
    align-items: center;
    -webkit-overflow-scrolling: touch;
    font-size: pxToRem(32px);
    font-family:PingFangSC-Light,PingFang SC;
    font-weight:300;
    background: #fff;
    margin-right: pxToRem(100px);
    .filter-item {
      text-align: center;
      display: flex;
      // flex-basis: 17px;
      flex-shrink: 0;
      white-space: nowrap;
      padding: 0 pxToRem(25px);
      background: #fff;
      height: pxToRem(90px);
      align-items: center;
      justify-content: center;
    }
    .active{
      font-size: pxToRem(36px);
      font-weight: 600;
      height: pxToRem(90px);
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      flex: 1;
      flex-direction: column;
    }
    .zhishi{
      background: url("./../img/zhishi.png");
      background-repeat: no-repeat;
      background-size: 100%;
      width: pxToRem(25px);
      height: pxToRem(6px);
      position: absolute;
      bottom: pxToRem(10px);;
      left: 50%;
      transform: translate(-50%, 0);
      z-index: 999;
    }
  }
  
  .shadow{
    height: pxToRem(90px);
    width: pxToRem(133px);
    position: absolute;
    right: pxToRem(101px);
    top: 0;
    background:linear-gradient(270deg,rgba(255,255,255,1) 0%,rgba(255,255,255,0.14) 100%);
    pointer-events: none;
  }
  .filte-btn{
    background: url("./../img/shaixuan.png");
    background-repeat: no-repeat;
    background-size: 100%;
    width: pxToRem(40px);
    height: pxToRem(40px);
  }
  .filte-btn-content {
    height: pxToRem(90px);
    position: absolute;
    right: pxToRem(27px);
    top: 0;
    background: #fff;
    width: pxToRem(74px);
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
}

이루어지다
중앙 에서 보 여 주 려 면 먼저 중심 점 을 찾 은 다음 클릭 하면 오프셋 을 계산 하고 해당 하 는 탭 을 중심 위치 로 스크롤 합 니 다.

filterBarClick = param => {
    const { value, text } = param;
    this.setState({
      filterSelect: value
    });
    let dom = this.refs;
    //          DOM
    let valDom = dom[value];
    //       DOM
    let contentDom = dom.filterBar;
    //             
    let valLeft = valDom.offsetLeft;
    //           
    let valWidth = valDom.clientWidth;
    //              
    let valCenter = valLeft + valWidth / 2;
    //      
    let clientWidth = document.querySelector('body').offsetWidth;
    //       （   30      15     ）
    let center = (clientWidth - 30) / 2;
    //                             
    if (valCenter > center) {
      contentDom.scrollTo({
        left: valCenter - center,
        behavior: 'smooth'
      });
    } else {
      contentDom.scrollTo({
        left: 0,
        behavior: 'smooth'
      });
    }
  };

총결산
여기 서 React 가 타 오 바 오 tab 의 중간 전환 효과 와 유사 한 글 을 소개 합 니 다.더 많은 관련 react tab 의 중간 전환 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 응원 바 랍 니 다!