首页 >> js开发 >> jsReact实现类似淘宝tab居中切换效果的示例代码js大全
jsReact实现类似淘宝tab居中切换效果的示例代码js大全
发布时间: 2021年1月13日 | 浏览:
| 分类:js开发
效果效果效果 DOM布局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 (
{arr.map((item, index) => {
if (item.value == this.state.filterSelect) {
return (
ref={item.value}
className="filter-item active"
key={index}
value={item.value}>
{item.text}
);
} else {
return (
className="filter-item"
onClick={() => {
this.filterBarClick(item);
}}
ref={item.value}
key={index}
value={item.value}>
{item.text}
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 (
{arr.map((item, index) => {
if (item.value == this.state.filterSelect) {
return (
ref={item.value}
className="filter-item active"
key={index}
value={item.value}>
{item.text}
);
} else {
return (
className="filter-item"
onClick={() => {
this.filterBarClick(item);
}}
ref={item.value}
key={index}
value={item.value}>
{item.text}
);
}
})}
);
};
render(){
return(
...
{this.filterDom()}
{/* 按钮和占位 */}
className="filte-btn-content"
onClick={() => {
this.filterBtnClick();
}}>
...
