自定义tabbar , 点击图标，切换样式
效果图
自定义tabbar
一、目录
src下新建文件夹，component用于存放公共组件，page用于存放页面组件。res放一些静态资源。
目录
二、步骤
2.1新建子组件TabItem
其中通过props传入子组件名字，图标 ，选中的样式、以及点击事件。也就是图下的一个小模块。
tabbar子组件
class TabItem extends Component{
render(){
return (
<div className={`tab-item ${this.props.tabClass}`} onClick={this.props.tabEvent}>
<div className="tab-item-icon"><img src={this.props.tabUrl} /></div>
<div className="tab-item-name">{this.props.tabName}</div>
</div>
);
}
}
2.2新建父组件Tabbar
小贴士，定义id时，最好与图标未选中时的命名一致，这样方便处理。
- 循环过滤tabs, 根据每一项的id与current比较，选则图标和样式。
- 将过滤的结果渲染出来
- 子组件点击时，调用父组件的 itemNav 时间，达到切换的效果。
class Tabbar extends Component {
constructor(){
super();
this.state={
tabs:[
{tabName:'首页',id:'index'},
{tabName:'排行榜',id:'ranking'},
{tabName:'今日打卡',id:'task'},
{tabName:'我的',id:'mine'},
],
current:0,
};
}
itemNav = (index) => {
//在这里就可以取到子组件传来的值
this.setState({
current: index,
})
}
render() {
var tabsList= this.state.tabs.map((item,index) =>{
var tabUrl=index === this.state.current ?(require('../../../res/images/'+item.id+'_active.png')):(require('../../../res/images/'+item.id+'.png'));
var tabClass=index === this.state.current ?"tab-active":"";
return (
<TabItem key={index} tabClass={tabClass} tabUrl={tabUrl} tabName={item.tabName} tabEvent={ () => { this.itemNav(index)} }></TabItem>
);
});
return (
<div className="tab">
{tabsList}
</div>
);
}
}
三、样式
在头部引入样式
import './Tabbar.css';
