微信小程序打星评分功能

2019独角兽企业重金招聘Python工程师标准>>>

效果图：

html： 

   
       
       
   
   {{stars}}分

css：

/*打星  */
radio-group{
  background-color: #fff;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  padding: 0 15px;
}
radio-group .iconfont{
  font-size: 28px;
  margin-right: 10rpx;
  color: orange;
}
radio-group .stars{
  line-height: 44px;
  margin-left: 50rpx;
}

js：

Page({
  data: {
    radioItems: [
      { classname: 'icon-pingxing', value: 1, checked: false },
      { classname: 'icon-pingxing', value: 2, checked: false },
      { classname: 'icon-pingxing', value: 3, checked: false },
      { classname: 'icon-pingxing', value: 4, checked: false },
      { classname: 'icon-pingxing', value: 5, checked: false }
    ],
    stars:0
  },
  onLoad: function (options) {
    
  },
  radioChange: function (e) {
    var radioItems = this.data.radioItems;
    for (var i = 0; i < e.detail.value;i++) {
      radioItems[i].checked = true; 
      radioItems[i].classname = "icon-shixing";
    }
    for (var j = e.detail.value; j < radioItems.length; j++) {
      radioItems[j].checked = false;
      radioItems[j].classname = "icon-pingxing";
    }
    this.setData({
      radioItems: radioItems,
      stars: e.detail.value
    });
  },
  
})

 

转载于:https://my.oschina.net/glysunset/blog/1824435