微信小程式實作使用者星級評價

我們先來看效果

wxml

<view class='assess-star'>
      <view class='star-wrap'>
        <view class='star-item' wx:for="{{stars}}" wx:key="index" style='background:url("{{item.flag==1?item.lightImg:item.blackImg}}") no-repeat top;background-size:100%;' data-index="{{index}}" bindtap='starClick'></view>
      </view>
    </view>      

js

// pages/my/my-post-evaluation/index.js
Page({

  /**
   * 頁面的初始資料
   */
  data: {
    stars: [{
      lightImg: '../../../img/icon/icon-fa-bu-ping-jia-xing-red.png',
      blackImg: '../../../img/icon/icon-fa-bu-ping-jia-xing-h.png',
      flag: 1,
    }, {
      lightImg: '../../../img/icon/icon-fa-bu-ping-jia-xing-red.png',
      blackImg: '../../../img/icon/icon-fa-bu-ping-jia-xing-h.png',
      flag: 1,
    }, {
      lightImg: '../../../img/icon/icon-fa-bu-ping-jia-xing-red.png',
      blackImg: '../../../img/icon/icon-fa-bu-ping-jia-xing-h.png',
      flag: 1,
    }, {
      lightImg: '../../../img/icon/icon-fa-bu-ping-jia-xing-red.png',
      blackImg: '../../../img/icon/icon-fa-bu-ping-jia-xing-h.png',
      flag: 1,
    }, {
      lightImg: '../../../img/icon/icon-fa-bu-ping-jia-xing-red.png',
      blackImg: '../../../img/icon/icon-fa-bu-ping-jia-xing-h.png',
      flag: 1,
    }]
  },
  /**
   * 選擇評價星
   */
  // 選擇評價星星
  starClick: function (e) {
    var that = this;
    for (var i = 0; i < that.data.stars.length; i++) {
      var allItem = 'stars[' + i + '].flag';
      that.setData({
        [allItem]: 2
      })
    }
    var index = e.currentTarget.dataset.index;
    for (var i = 0; i <= index; i++) {
      var item = 'stars[' + i + '].flag';
      that.setData({
        [item]: 1
      })
    }
  },
  /**
   * 生命周期函數--監聽頁面加載
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函數--監聽頁面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函數--監聽頁面顯示
   */
  onShow: function () {

  },

  /**
   * 生命周期函數--監聽頁面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函數--監聽頁面解除安裝
   */
  onUnload: function () {

  },

  /**
   * 頁面相關事件處理函數--監聽使用者下拉動作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 頁面上拉觸底事件的處理函數
   */
  onReachBottom: function () {

  },

  /**
   * 使用者點選右上角分享
   */
  onShareAppMessage: function () {

  }
})      

wxss

/* 星級 */
.assess-star {
 margin-top: 20rpx;
}
.star-item {
 display: inline-block;
 height:38rpx;
 width: 37rpx;
 margin-right: 17rpx;
}