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

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

import Taro from "@tarojs/taro-h5";
import Nerv from "nervjs";
import { Image, Text, View } from '@tarojs/components';
import ClIcon from "../icon/index";
import { TEXT_COLOR_LIST } from "../utils/model";
export default class ClMenuList extends Taro.Component {
  render() {
    const props = this.props;

    const shortLineClassName = props.shortBorder ? 'sm-border' : '';
    const arrowClassName = arrow => arrow ? 'arrow' : '';
    const cardClassName = props.card ? 'card-menu' : '';
    const list = props.list || [];
    const click = index => {
      props.onClick && props.onClick(index);
    };
    const itemComponent = list.map((item, index) => <View key={item.title} className={`cu-item ${arrowClassName(!!item.arrow)}`} onClick={() => click(index)}>
      <View className="content flex align-center">
        {item.icon && item.icon.iconName ? <View className="margin-right-xs flex align-center"><ClIcon {...item.icon} /></View> : ''}
        {item.imgUrl ? <Image src={item.imgUrl} className="png margin-right-xs" mode="aspectFit" /> : ''}
        <Text className={`${TEXT_COLOR_LIST[item.titleColor || 'black']}`}>
          {item.title}
        </Text>
      </View>
    </View>);
    return <View className={`cu-list menu ${shortLineClassName} ${cardClassName}`}>
      {itemComponent}
    </View>;
  }

}
ClMenuList.options = {
  addGlobalClass: true
};