mp-colorui/dist/h5/components/tabBar/index.js

MP ColorUI 是一款基于 Taro 框架并且联合 Color-UI CSS 库开发的多端 UI 组件库（支持小程序端和H5端）

import Nerv from "nervjs";
import { View, Image } from "@tarojs/components";
import Taro from "@tarojs/taro-h5";
import { classNames, isNumber } from "../../lib/index";
import { BG_COLOR_LIST, TEXT_COLOR_LIST } from "../../lib/model";
export default class ClTabBar extends Taro.Component {
  render() {
    const props = this.props;

    const [activeIndex, setActiveIndex] = Taro.useState(0);
    Taro.useEffect(() => {
      setActiveIndex(props.active || 0);
    }, [props.active]);
    const onClick = index => {
      setActiveIndex(index);
      props.onClick && props.onClick(index);
    };
    const colorClassName = props.bgColor ? BG_COLOR_LIST[props.bgColor] : "bg-white";
    const activeColorClassName = props.activeColor ? TEXT_COLOR_LIST[props.activeColor] : "text-blue";
    const barComponent = props.tabs.map((item, index) => <View onClick={() => {
      onClick(index);
    }} key={"key-" + item.icon} className={`action ${item.action ? "add-action" : ""} ${activeIndex === index ? activeColorClassName : ""}`}>
      <View className={classNames([{ "cuIcon-cu-image": item.img, [`cuIcon-${item.icon}`]: item.icon }])}>
        {item.img ? <Image mode="aspectFit" src={item.img} /> : ""}
        {item.badge !== false ? <View className="cu-tag badge">
            {isNumber(item.badge) ? item.badge : ""}
          </View> : ""}
      </View>
      <View>{item.title}</View>
    </View>);
    return <View className={classNames(["cu-bar tabbar", {
      "safe-area": props.safeArea
    }, colorClassName], props.className)} style={Object.assign(props.fix ? { position: "fixed", width: "100vw", bottom: "0", zIndex: 10 } : {}, props.style)}>
      {barComponent}
    </View>;
  }

}
ClTabBar.options = {
  addGlobalClass: true
};
ClTabBar.defaultProps = {
  bgColor: "white",
  activeColor: "blue",
  active: 0,
  tabs: [],
  safeArea: true
};