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

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

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

    const [tabs, setTabs] = Taro.useState(props.tabs || []);
    const [buttons, setButtons] = Taro.useState(props.buttons || []);
    const onClickTab = index => {
      props.onClickTab && props.onClickTab(index);
    };
    const onClickButton = index => {
      props.onClickButton && props.onClickButton(index);
    };
    const bgColorClassName = BG_COLOR_LIST[props.bgColor || "white"];
    Taro.useMemo(() => {
      const initTabs = props.tabs || [];
      const tabs = initTabs.map(item => ({
        id: generateId(),
        ...item
      }));
      setTabs(tabs);
    }, [props.tabs]);
    Taro.useMemo(() => {
      const initButtons = props.buttons || [];
      const buttons = initButtons.map(item => ({
        id: generateId(),
        ...item
      }));
      setButtons(buttons);
    }, [props.buttons]);
    const tabsComponent = tabs.map((item, index) => <View key={item.id} className="ClShopBar__tab">
      <ClButton bgColor={props.bgColor} shadow={false} {...item.moreAction} onClick={() => {
        onClickTab(index);
      }}>
        <View className="action" style={{
          background: "transparent"
        }}>
          <View className={`${item.icon ? "cuIcon-" + item.icon : ""}`}>
            {item.badge !== false ? <View className="cu-tag badge">
                {item.badge === true ? "" : item.badge}
              </View> : ""}
          </View>
          <View>{item.title}</View>
        </View>
      </ClButton>
    </View>);
    const buttonsComponent = buttons.map((item, index) => <View key={item.id} className={`${BG_COLOR_LIST[item.bgColor || "red"]} submit`} onClick={() => {
      onClickButton(index);
    }}>
      {item.text}
    </View>);
    return <View className={classNames(`cu-bar ${bgColorClassName} tabbar ${props.safeArea ? "safe-area" : ""} shop ${props.border ? "border" : ""}`, props.className)} style={Object.assign(props.fix ? { position: "fixed", bottom: "0", width: "100vw", zIndex: "10" } : {}, props.style)}>
      {tabsComponent}
      {buttonsComponent}
    </View>;
  }

}
ClShopBar.options = {
  addGlobalClass: true
};
ClShopBar.defaultProps = {
  bgColor: "white",
  tabs: [],
  buttons: [],
  border: false,
  onClickButton: () => {},
  onClickTab: () => {},
  safeArea: true
};