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 {
   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%;
             pxToRem(25px);
            height: pxToRem(6px);
            position: absolute;
            bottom: pxToRem(10px);;
            left: 50%;
            transform: translate(-50%, 0);
            z-index: 999;
        }
    }
    
    .shadow{
        height: pxToRem(90px);
         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%;
         pxToRem(40px);
        height: pxToRem(40px);
    }
    .filte-btn-content {
        height: pxToRem(90px);
        position: absolute;
        right: pxToRem(27px);
        top: 0;
        background: #fff;
         pxToRem(74px);
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }
}

https://www.houdianzi.com/ vi设计公司

实现

想要居中展示首先是需要找到中心点，然后在点击是计算偏移量，把对应的标签滚动到中心位置

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' }); } };" title="">

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'
            });
        }
    };