微信小程序开发之五星评分

一位同学说要写五星评分.要有半颗星的评分. 
于是我做了个玩具.有空了做模块化,这代码看不下去了. 
gif: 

代码: 
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>
 
1
2
3
4
5
6
 
1
2
3
4
5
6

2.index.wxss

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

.item {
  position: absolute;
  top: 50rpx;
  width: 75rpx;
  height: 150rpx;
}
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14

3.index.js

//index.js
//优快云微信小程序开发专栏:http://blog.youkuaiyun.com/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
    })
  }
})
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

demo下载地址 
优快云微信小程序开发专栏,欢迎关注! 
我的博客,欢迎交流批评!