getTabList = () => {
const { zlDOList } = this.state //tab头部数据
return zlDOList.map((item, index) => {
return (
<div className={this.check_title_index(index)} onClick={() => this.leftTabActive(item, index)} key={index}>
<div className="textLismall">{item.tabName}</div>
<div className="textLiNums">{item.numAll}</div>
</div>
)
})
}
check_title_index = (index) => { //tab索引样式,根据条件判断,样式自定义
return index === this.state.currentIndex ? "leftTabLiActive" : "leftTabLi"
}
leftTabActive = async (item, index) => {
await this.setState({
currentIndex: index, //tab当前索引值
caseList: item.caseList == undefined ? [] : item.caseList, //当个tab数据值列表
})
}
react自定义实现tab切换功能
最新推荐文章于 2024-06-24 15:16:38 发布