封装一个小程序星星评价功能

一、功能

• 评论等级
• 实现多个评价联动 (注: 因为不会发动图, 所以可以将代码复制到项目中查看效果)

技术: Taro

二、实现

首先我们先考虑一个评论等级怎么实现, 先随便写一个UI界面, 如下

当我点击一个星级的时候, 之前的星级都会填充, 所以我们只需要把之前的⭐️填充就好了, 话不多说, 直接上封装好的代码

interface IProps {
  length: number // 填充个数
  onChange: (index) => void // 填充发生变化的回调
  fill: number // 填充到第几个
}

export default function Star({ length, onChange, fill } :IProps) {

  return (
    <View className={styles.star} >
      {
        Array(length).fill('').map((value, index) => 
          <View 
            data-key={index + 1} 
            className={styles.banner} 
            style={{backgroundImage: (index < fill) ? `url(${fill_star})` : `url(${star})`}} 
            onClick={(e) => onChange(e.currentTarget.dataset.key)}
          />
        )
      }
    </View>
  )
}

这段代码就可实现星级评价

然后我们该考虑多个评价联动, 这是什么意思呢, 就是类似于一个订单评价, 会包括总体评价, 满意度等, 往往的逻辑就是, 几个评价相互独立, 但是当我点击总体评价为五星的, 其他的都为五星, 不是五星时, 不影响. 就直接用我封装的星级代码就行, 因为比较简单, 就发段业务代码就行了, 可直接使用

const arr = [{id:'a', name: '总体评价'，fill：-1},{id:'b', name: '满意度'，fill：-1},{id:'c', name: '满意度2'，fill：-1}]
export default function LinkageStar() {

 const [ stars, setStars ] = useState(arr)

  // 卡片评价
  const handleClick = (number, type) => {
    let starArr = [ ...stars ]
    if(type === 'a' && number === 5) {
      starArr.forEach((el) => el.fill = number)
    }else {
      starArr.forEach((el) => {
        if(el.id === type) {
          el.fill = number
        }
      })
    }
    setStars(starArr)
  }

  return (
    <View>

      {
        stars.map((value) => 
        <View className={styles.evaluate} key={value.id}>
          <View className={styles.content} >
            <View className={styles.title} >{value.name}</View>
          </View>
          <View className={styles.starBox}>
            <Star length={5} onChange={(number) => handleClick(number, value.id)} fill={value.fill} /> 
          </View>
        </View>
        )
      }

    </View>
  )
}

LinkageStar.config = {
  navigationBarTitleText: '满意度调查',
}

效果

当第一项点五星时, 第二项和第三项也会变五星, 其他情况互不影响.