小程序 实现星星评分(共10分),含有半星

完整代码地址:https://download.csdn.net/download/qq_40190624/11154051

 

效果图:

 星星评分做为一个子组件,由父组件传入分值进行判断,具体显示几个灰星,几颗半星及亮星

子组件:stars.html

  
  
  
  {{rates}}

js:

/**
 * 1、小程序初次打开会执行小程序的生命周期钩子函数：onLaunch->onShow，而且这些钩子函数只会执行一次。关闭小程序，小程序并不会真正退出，所以执只行了onHide。
2、页面的初次打开会执行页面的生命周期钩子函数：onLoad->onShow->onReady，通过navigateTo离开页面会保留该页面，此时只执行onHide，其他方式离开（包括navigateBack）都会干掉当前页面，此时会执行onHide>onUnload。特殊情况:switchTabTo会干掉所有非tab页面，但是保留所有已经加载的tab页面。
3、包含组件的页面，先执行所有组件的created，再执行所有组件的attached，然后执行页面的onLoad>onshow，再执行所有组件的ready，随后执行页面的onReady。当页面被卸载时，先执行页面的onUnload，再执行组件的detached。页面不卸载，不会触发组件的detached。
 * 
 */
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    // 星星评分的属性设置
    rate: {
      type: Number,
      value: 0
    },
    // 由用户来定义星星的大小和文字的大小
    starSize:{
      type:Number,
      value:20,//rpx
    },
    fontSize:{
      type:Number,
      value:20
    },
    fontColor:{
      type:String,
      value:'#ccc'
    }



  },

  /**
   * 组件的初始数据
   */
  data: {
  },

  /**
   * 组件的方法列表
   */
  methods: {

  },
  lifetimes: {
    // 组件生命周期声明对象，将组件的生命周期收归到该字段进行声明，原有声明方式仍旧有效，如同时存在两种声明方式，则lifetimes字段内声明方式优先级最高
    attached() {
      var that = this;
      //接收父组件传入的值
      let rate = that.properties.rate; //父组件传过来的评分共10分,根据评分判断星星数
      let intRate = parseInt(rate) //取整数,得到多少评分
      console.log(intRate) //如6分
      // 除出来有可能是浮点,所以需要求整数,1分等于0.5个星星,需要除以2,得到星星个数
      let light = parseInt(intRate / 2); //3个星星
      let half = intRate % 2; //求半灰星,对传入过来的评分模于2,得出半星
      console.log(light)
      console.log(half)
      let gray = 5 - light - half; //一共5个星星,总星减去高亮的星星再减去一半亮亮的星星得出灰星
      console.log(gray)
      // 对传过来的数据进行遍历,页面显示 
      let lights = [],
        halfs = [],
        grays = [];
      for (let i = 1; i <= light; i++) {
        lights.push(i)
      }
      for (let i = 1; i <= half; i++) {
        halfs.push(i)
      }
      for (let i = 1; i <= gray; i++) {
        grays.push(i)
      }
      // 对传进来的评分做判断,如果为0,显示为评分,如果评分但是是整数要保留一位小数
      rate = rate && rate > 0 ? rate.toFixed(1)+`分` : "未评分";
      console.log(rate)
      this.setData({
        lights,
        halfs,
        grays,
        rates: rate
      })
      console.log(this.data)
    },

  },
})

css:

.movie-grade{
  display: flex;
  justify-content: center;
  align-items: center;
}
.movie-grade image{
  width: 20rpx;
  height: 20rpx;
}
.movie-grade text{
  font-size: 24rpx;
  color: #ddd;
  margin-top: 20rpx;
}

 

父组件:

  
    电影
    更多
  
  
    
      
        
          
        
        海王海王海王海王海王
        
引入子组件: