代码: 
1.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>

2.index.wxss

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

3.index.js

//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
    })
  }
})

demo下载

star.ra

转载请注明：谷谷点程序 » 微信小程序开发之五星评分