MMStars 评分组件

Props

IStarsProps

属性	类型	默认值	必传	说明
value	number	0	否	星级
size	number	20	否	图标尺寸
gap	number	10	否	图标之间的间距
type	TStar | TStar[]		否	评价星类型
total	number	5	否	总星级

代码示例

import Taro from "@tarojs/taro";
import { FC, memo, useState } from "react";
import { View } from "@tarojs/components";
import styles from "./index.module.less";
import MMNavigation from "@wmeimob/taro-design/src/components/navigation";
import MMStars, { EStarType } from "../../components/stars";

interface IStarsProps {}

const Component: FC<IStarsProps> = () => {
  const [value, setValue] = useState(5);
  const [value2, setValue2] = useState(3);
  return (
    <View className={styles.starsStyle}>
      <MMNavigation title="stars" />
      <View className={styles.content}>
        <MMStars
          value={value}
          size={20}
          gap={10}
          type={EStarType.red}
          total={8}
          onChange={setValue}
        />
        <View>红色-8星-图标小-间距小</View>
        <MMStars
          value={value2}
          size={30}
          gap={20}
          type={EStarType.yellow}
          total={5}
          onChange={setValue2}
        />
        <View>黄色-5星-图标大-间距大</View>
      </View>
    </View>
  );
};

const Stars = memo(Component);
export default Stars;