微信小程序开发之五星评分（可半分）

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>

wxss页面：

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

js页面：

//获取应用实例
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
        })
    }
})