mp-colorui
Version:
MP ColorUI 是一款基于 Taro 框架并且联合 Color-UI CSS 库开发的多端 UI 组件库（目前仅支持小程序端）
60 lines • 2.63 kB
JavaScript
import Nerv from "nervjs";
import { ScrollView, Text, View } from '@tarojs/components';
import { Component } from "@tarojs/taro-h5";
import { BG_COLOR_LIST, TEXT_COLOR_LIST } from "../utils/model";
export default class ClTabs extends Component {
constructor() {
super(...arguments);
this.state = {
activeTab: 0,
scrollLeft: 0
};
}
componentDidMount() {
this.setState({
activeTab: this.props.active || 0
});
}
onClickTab(index) {
this.setState({
activeTab: index,
scrollLeft: (index - 1) * 60
});
this.props.onClick && this.props.onClick(index);
}
render() {
const bgColorClassName = this.props.bgColor ? BG_COLOR_LIST[this.props.bgColor] : '';
const activeColor = this.props.activeColor ? TEXT_COLOR_LIST[this.props.activeColor] : '';
const defaultComponent = <ScrollView scrollX className={`${bgColorClassName} nav`} scrollWithAnimation scrollLeft={this.state.scrollLeft}>
{this.props.tabs.map((item, index) => <View key={index} className={`cu-item ${this.state.activeTab === index ? `${activeColor} cur` : ''}`} onClick={this.onClickTab.bind(this, index)}>
{item.icon ? <Text className={`cuIcon-${item.icon} margin-right-xs`} /> : ''}
<Text>{item.text}</Text>
</View>)}
</ScrollView>;
const verbComponent = <ScrollView scrollX className={`${bgColorClassName} nav`}>
<View className="flex text-center">
{this.props.tabs.map((item, index) => <View key={index} className={`cu-item flex-sub ${this.state.activeTab === index ? `${activeColor} cur` : ''}`} onClick={this.onClickTab.bind(this, index)}>
{item.icon ? <Text className={`cuIcon-${item.icon} margin-right-xs`} /> : ''}
<Text>{item.text}</Text>
</View>)}
</View>
</ScrollView>;
const centerComponent = <ScrollView scrollX className={`${bgColorClassName} nav text-center`}>
{this.props.tabs.map((item, index) => <View key={index} className={`cu-item ${this.state.activeTab === index ? `${activeColor} cur` : ''}`} onClick={this.onClickTab.bind(this, index)}>
{item.icon ? <Text className={`cuIcon-${item.icon} margin-right-xs`} /> : ''}
<Text>{item.text}</Text>
</View>)}
</ScrollView>;
return this.props.type === 'default' ? defaultComponent : this.props.type === 'verb' ? verbComponent : this.props.type === 'center' ? centerComponent : '';
}
}
ClTabs.options = {
addGlobalClass: true
};
ClTabs.defaultProps = {
type: 'default',
bgColor: '',
activeColor: 'black',
active: 0,
tabs: []
};