微信小程序實現星星評價效果-支持多個條目評價

代碼實現

wxml文件

<!--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>

js文件

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
      })
  }
})

wxss

/*評價區域  */
.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;
}