快捷導(dǎo)航

React實現(xiàn)類似淘寶tab居中切換效果的示例代碼

更新時間：2020年06月02日 09:38:10 作者：淺夏晴空

這篇文章主要介紹了React實現(xiàn)類似淘寶tab居中切換效果,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下

效果

01-帖子列表

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: "商家?guī)烊?
  },
  {
   value: 10,
   text: "代理合作"
  },
  {
   value: 11,
   text: "過戶轉(zhuǎn)籍"
  },
  {
   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;
  }
}

實現(xiàn)

想要居中展示首先是需要找到中心點，然后在點擊是計算偏移量，把對應(yīng)的標(biāo)簽滾動到中心位置

filterBarClick = param => {
    const { value, text } = param;
    this.setState({
      filterSelect: value
    });
    let dom = this.refs;
    //獲取點擊時當(dāng)前標(biāo)簽的DOM
    let valDom = dom[value];
    //獲取標(biāo)簽父元素DOM
    let contentDom = dom.filterBar;
    //計算當(dāng)前標(biāo)簽到最左側(cè)的寬度
    let valLeft = valDom.offsetLeft;
    //計算當(dāng)前標(biāo)簽本身的寬度
    let valWidth = valDom.clientWidth;
    //當(dāng)前標(biāo)簽中心點到最左側(cè)的距離
    let valCenter = valLeft + valWidth / 2;
    //可視屏幕寬度
    let clientWidth = document.querySelector('body').offsetWidth;
    //可視屏幕中心點（減去的30是列表兩邊的15像素的留白）
    let center = (clientWidth - 30) / 2;
    //計算當(dāng)前標(biāo)簽中心點和屏幕中心點的偏移量 然后滾動相應(yīng)的距離
    if (valCenter > center) {
      contentDom.scrollTo({
        left: valCenter - center,
        behavior: 'smooth'
      });
    } else {
      contentDom.scrollTo({
        left: 0,
        behavior: 'smooth'
      });
    }
  };

總結(jié)

到此這篇關(guān)于React實現(xiàn)類似淘寶tab居中切換效果的文章就介紹到這了,更多相關(guān)react tab居中切換內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: