小程序 - 星星 --支持半颗星

https://www.jb51.net/article/100033.htm

<!--index.wxml-->
 
<block wx:for="{{stars}}"> 
 <image class="star-image" style="left: {{item*150}}rpx" src="{{key > item ?(key-item == 0.5?halfSrc:selectedSrc) : normalSrc}}"> 
  <view class="item" style="left:0rpx" data-key="{{item+0.5}}" bindtap="selectLeft"></view> 
  <view class="item" style="left:75rpx" data-key="{{item+1}}" bindtap="selectRight"></view> 
 </image> 
</block>

.star-image { 
 position: absolute; 
 top: 50rpx; 
 width: 150rpx; 
 height: 150rpx; 
 src: "../../images/normal.png"; 
}
  
.item { 
 position: absolute; 
 top: 50rpx; 
 width: 75rpx; 
 height: 150rpx; 
}

//index.js
 
//CSDN微信小程序开发专栏:http://blog.csdn.net/column/details/13721.html
 
//获取应用实例
 
var app = getApp() 
Page({ 
 data: { 
  stars: [0, 1, 2, 3, 4], 
  normalSrc: '../../images/normal.png', 
  selectedSrc: '../../images/selected.png', 
  halfSrc: '../../images/half.png', 
  key: 0,//评分 
 }, 
 onLoad: function () { 
 }, 
 //点击右边,半颗星 
 selectLeft: function (e) { 
  var key = e.currentTarget.dataset.key 
  if (this.data.key == 0.5 && e.currentTarget.dataset.key == 0.5) { 
   //只有一颗星的时候,再次点击,变为0颗 
   key = 0; 
  } 
  console.log("得" + key + "分") 
  this.setData({ 
   key: key 
  }) 
 }, 
 //点击左边,整颗星 
 selectRight: function (e) { 
  var key = e.currentTarget.dataset.key 
  console.log("得" + key + "分") 
  this.setData({ 
   key: key 
  }) 
 } 
})

https://www.jb51.net/article/150081.htm