shuhuadasai2024/src/component/footer/index.tsx

import React from "react";
import { View, Image } from "@tarojs/components";

import "./index.scss";

class LocalFooter extends React.Component<any, any> {
  static defaultProps = {
    list: [],
    onClick: () => {},
  };

  constructor(props: any) {
    super(props);
    this.state = {
      selectAct: 0,
    };
  }

  #clickItem = (i: number) => {
    this.setState({ selectAct: i });
    this.props.onClick(i);
  };

  render() {
    const { list } = this.props;
    const element = list.map((item, i) => {
      return (
        <view
          key={i}
          onClick={() => this.#clickItem(i)}
          className={
            "footer-item " +
            (i === this.state.selectAct ? "footer-item-active" : "")
          }
        >
          <Image
            className="footer-item-icon"
            mode="aspectFit"
            src={i === this.state.selectAct ? item.icon_act : item.icon}
          ></Image>
          <View className="footer-item-label">{item.title}</View>
        </view>
      );
    });

    return <View className="footer">{element}</View>;
  }
}

export { LocalFooter };