React技术 | 速学！利用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;
}

}