代碼: 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: 50rpx; width: 150rpx; height: 150rpx; src: "../../images/normal.png"; } .item { position: absolute; top: 50rpx; width: 75rpx; height: 150rpx; } 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 }) } })