微信小程序实现用户星级评价

我们先来看效果

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