mp-colorui
Version:
MP ColorUI 是一款基于 Taro 框架并且联合 Color-UI CSS 库开发的多端 UI 组件库（目前仅支持小程序端）
48 lines • 1.72 kB
JavaScript
import Nerv from "nervjs";
import { View } from '@tarojs/components';
import { Component } from "@tarojs/taro-h5";
import { isNumber } from "../utils/index";
import { BG_COLOR_LIST, TEXT_COLOR_LIST } from "../utils/model";
export default class ClTabBar extends Component {
constructor() {
super(...arguments);
this.state = {
activeIndex: 0
};
}
click(index) {
this.setState({
activeIndex: index
});
this.props.onClick && this.props.onClick(index);
}
componentDidMount() {
this.setState({
activeIndex: this.props.active || 0
});
}
render() {
const colorClassName = this.props.bgColor ? BG_COLOR_LIST[this.props.bgColor] : 'bg-white';
const activeColorClassName = this.props.activeColor ? TEXT_COLOR_LIST[this.props.activeColor] : 'text-blue';
const barComponent = this.props.tabs.map((item, index) => <View onClick={this.click.bind(this, index)} key={item.icon} className={`action ${item.action ? 'add-action' : ''} ${this.state.activeIndex === index ? activeColorClassName : ''}`}>
<View className={`${item.img ? 'cuIcon-cu-image' : item.icon ? 'cuIcon-' + item.icon : ''}`}>
{item.badge !== false ? <View className="cu-tag badge">
{isNumber(item.badge) ? item.badge : ''}
</View> : ''}
</View>
<View>{item.title}</View>
</View>);
return <View className={`cu-bar tabbar ${colorClassName}`} style={this.props.fix ? { position: 'fixed', width: '100vw', bottom: '0', zIndex: 10 } : ''}>
{barComponent}
</View>;
}
}
ClTabBar.options = {
addGlobalClass: true
};
ClTabBar.defaultProps = {
bgColor: 'white',
activeColor: 'blue',
active: 0,
tabs: []
};