封装一个小程序星级评价 可以滑动评价点击评价 半星

直接贴上代码 可以直接当组件使用

*实现滑动评价类似大众点评也可以点击 实现半星评价 *
自己可以贴到开发工具 所有代码块注释说明了 如果还有看不懂的地方 欢迎评论

实现效果图

JS

Component({
  data: {
    fullStarUrl: '../../images/icon2/star1.png', //满星图片（ps:这里的图片你们自己引入）
    nullStarUrl: '../../images/icon2/star2.png', //空星图片
    callStarUrl: '../../images/icon2/star3.png', //半星图片
    scoreArray: [1, 2, 3, 4, 5], //分为1-5个评分层次
  },
  properties: {
    score: {  //评价分数
      type: Number, 
      value:0
    },
  },

  methods:{
    changeScore: function (e) {
        var that = this;
        var num = 0; //临时数字,动态确定要传入的分数
        var touchX = e.touches[0].pageX - e.currentTarget.offsetLeft; //获取当前触摸点X坐标
        console.log(touchX)
        var starMinX = 0; //最左边第一颗星的X坐标,假设距离页面距离为0
        var starWidth = 30; //星星图标的宽度,假设30(已在wxss文件中设置".star")
        var starLen = 10; //星星之间的距离假设为10(已在wxss文件中设置".starLen")
        var starMaxX = starWidth * 5 + starLen * 4; //最右侧星星最右侧的X坐标,需要加上5个星星的宽度和4个星星间距

        if (touchX > starMinX && touchX < starMaxX) { //点击及触摸的初始位置在星星所在空间之内

          num = (touchX - starMinX) / (starWidth + starLen);

          if (num != that.data.score) { //如果当前得分不等于刚设置的值,才赋值,因为touchmove方法刷新率很高,这样做可以节省点资源
            //半棵星 （这里为了更加清晰使用了if else 不然你可以用三目压缩 或者其他办法 只要你能看得懂 这里主要能实现）
            if (num < 0.5 && num > 0) { // .5
              num = 0.5
            } else if (num < 1 && num > 0.5) { // 1
              num = 1
            } else if (num < 1.5 && num > 1) { // 1.5
              num = 1.5
            } else if (num < 2 && num > 1.5) { // 2
              num = 2
            } else if (num < 2.5 && num > 2) { // 2.5
              num = 2.5
            } else if (num < 3 && num > 2.5) { // 3
              num = 3
            } else if (num < 3.5 && num > 3) { // 3.5
              num = 3.5
            } else if (num < 4 && num > 3.5) { // 4
              num = 4
            } else if (num < 4.5 && num > 4) { // 4.5
              num = 4.5
            } else if (num < 5 && num > 4.5) { // 5
              num = 5
            }
            that.setData({
              score: num,
            })
            // 传递星级过去
            this.triggerEvent('starNum', num)
          }
        } else if (touchX < starMinX) { //如果点击或触摸位置在第一颗星星左边,则恢复默认值,否则第一颗星星会一直存在
          that.setData({
            score: 0,
          })
        }
      }
    },
  }
})

wxml

<view class="view_star" bindtouchmove='changeScore'  bindtap='changeScore' >
  <block wx:for='{{scoreArray}}' wx:key='item' ><!-- 遍历评分列表 -->
    <!-- 设置触摸事件和点击事件为同一个方法,否则点击却不滑动的话,不触发事件 -->
    <view class='starLen' >
      <!-- 使用三目运算符来动态变化显示的是哪张图片,score是js中的分数,index是scoreArray的下标 -->
      <image class='star' src="{{score > index ? score - index == 0.5  ?  callStarUrl : fullStarUrl  : nullStarUrl}}" />
    </view>
  </block>
</view>

wxss

.starLen{
  margin-right: 10px;
  display: inline-block;
}

.star{
  width:30px;
  height:30px;
  vertical-align:text-bottom;
  display: inline-block;
}

.scoreContent{
  margin-left: 100px;
  display: inline-block;
}

父组件使用就贴wxml代码了 json引入代码就根据你们自己的路径引入了

<star bind:starNum="getStarNum" score="{{dataArr.entity.scoreNum}}" display="{{true}}"></star>
starNum接受星数据  score 传递过去 父子组件+子组件通讯（复习一下）