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

悠悠 2023-02-16 04:26 258阅读 0赞

我们先来看效果

![20200608105558422.png][]

具体实现代码如下:

### wxml ###

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

QQ群: 1102727334

[20200608105558422.png]: https://img-blog.csdnimg.cn/20200608105558422.png