React实现类似淘宝tab居中切换效果

前端  /  管理员 发布于 6年前   230

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