<!--pages/evaluatepage/evaluatepage.wxml--><view class='container'> <view class='evaluate_contant'> <!--外層循環控制有幾個評價條目 -->  <block wx:for='{{evaluate_contant}}' wx:key='' wx:for-index='idx'>  <view class='evaluate_item'>   <view class='evaluate_title'>{{item}}</view>   <!--星星評價 -->   <view class='evaluate_box'>   <!--內層循環展示每個評價條目的星星 -->   <block wx:for="{{stars}}" wx:key=''>    <image class="star-image" style="left: {{item*80}}rpx" src="{{scores[idx] > item ?(scores[idx]-item == 0.5?halfSrc:selectedSrc) : normalSrc}}">    <view class="item" style="left:0rpx" data-score="{{item + 0.5}}" data-idx='{{idx}}' bindtap="selectLeft"></view>    <view class="item" style="left:20rpx" data-score="{{item + 1}}" data-idx='{{idx}}' bindtap="selectRight"></view>    </image>   </block>   </view>  </view>  </block>  <button class='submit_button' bindtap='submit_evaluate' type='primary'>提交</button> </view></view>

Page({ data: { evaluate_contant: ['評價條目一', '評價條目二', '評價條目三',], stars: [0, 1, 2, 3, 4], normalSrc: '../../images/no-star.png', selectedSrc: '../../images/full-star.png', halfSrc: '../../images/half-star.png', score: 0, scores: [0, 0, 0], }, // 提交事件 submit_evaluate: function () { console.log('評價得分' + this.data.scores) }, //點擊左邊,半顆星 selectLeft: function (e) { var score = e.currentTarget.dataset.score if (this.data.score == 0.5 && e.currentTarget.dataset.score == 0.5) {  score = 0; } this.data.scores[e.currentTarget.dataset.idx] = score,  this.setData({  scores: this.data.scores,  score: score  }) }, //點擊右邊,整顆星 selectRight: function (e) { var score = e.currentTarget.dataset.score this.data.scores[e.currentTarget.dataset.idx] = score,  this.setData({  scores: this.data.scores,  score: score  }) }})

/*評價區域 */.container .evaluate_contant .evaluate_item { font-size: 30rpx; color: gray; margin-left: 20rpx; margin-top: 30rpx;}/*評價標題 */.container .evaluate_contant .evaluate_item .evaluate_title { display: inline-block;}/*評價盒子 */.container .evaluate_contant .evaluate_item .evaluate_box { position: absolute; left: 220rpx; width: 100%; display: inline-block;}/*星星評價的每個圖片 */.container .evaluate_contant .evaluate_item .evaluate_box .star-image { position: absolute; width: 40rpx; height: 40rpx; src: "../../images/no-star.png";}/*星星的左邊和右邊區域<點擊左邊半個星星，點擊右邊整個星星> */.container .evaluate_contant .evaluate_item .evaluate_box .star-image .item { position: absolute; top: 0rpx; width: 20rpx; height: 40rpx;}/*按鈕 */.container .evaluate_contant .submit_button { height: 60rpx; font-size: 30rpx; line-height: 60rpx; margin: 20rpx;}