微信小程序-五星评分

.wxml

<block wx:for="{{stars}}">
 <image class="star-image" src="{{key > item ?(key-item == 0.5?halfSrc:selectedSrc) : normalSrc}}">
 <view class="tag">
 <view class="item" data-key="{{item+0.5}}" bindtap="selectLeft">view>
 <view class="item" data-key="{{item+1}}" bindtap="selectRight">view>
 view>
 image>
block>

.wcss

.star-image {
 width: 16px;
 height: 16px;
 margin-left: 30px;
 margin-top: 30px;
}

.item {
 float: left;
 width: 8px;
 height: 16px;
}

.tag {
 display:inline-block;
 position: absolute;
 top: 30px;
}

.js

var app = getApp()
Page({
    data: {
        stars: [0, 1, 2, 3, 4],
        normalSrc: '../../image/imgs/star.png',
        selectedSrc: '../../image/imgs/status.png',
        halfSrc: '../../image/icons/coin.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
        })
    }
})