mp-colorui/dist/h5/components/searchBar/searchResult/index.js

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

import Nerv from "nervjs";
import Taro from "@tarojs/taro-h5";
import { View } from "@tarojs/components";
import ClFlex from "../../flex/index";
import ClText from "../../text/index";
import ClLayout from "../../layout/index";
import ClIcon from "../../icon/index";
import { classNames, generateId } from "../../../lib/index";
import "./index.scss";
export default class ClSearchResult extends Taro.Component {
  render() {
    const props = this.props;

    const [resultState, setResultState] = Taro.useState(props.result || []);
    Taro.useEffect(() => {
      const list = props.result || [];
      setResultState(list.map(item => {
        item.cu_search_bar_result_id = generateId();
        return item;
      }));
    }, [props.result]);
    const result = resultState || [];
    const showLoading = props.showLoading;
    const onTouchResult = props.onTouchResult;
    const resultComponent = result.map((item, index) => <View key={"key-" + index} className="cl_search_result solid-bottom" onClick={() => {
      onTouchResult(index);
    }}>
      <ClLayout padding="small" paddingDirection="vertical">
        <ClText text={item.title} size="large" />
        <ClText text={item.desc} size="xsmall" cut />
      </ClLayout>
    </View>);
    const loadingComponent = <ClLayout padding="normal" paddingDirection="vertical">
      <View className="cl_search_loading">
        <ClIcon iconName="loading2" />
      </View>
    </ClLayout>;
    return <View className={classNames(props.className)} style={Object.assign({ width: "100%" }, props.style)}>
      <ClFlex direction="column" align="center" justify="center">
        {showLoading ? loadingComponent : resultComponent}
      </ClFlex>
    </View>;
  }

}
ClSearchResult.options = {
  addGlobalClass: true
};