A brief discussion on how mini programs implement the 'five-star evaluation' function (supports click + slide)

This article will introduce to you how to implement the "five-star evaluation" function of the mini program, and support the implementation of click scoring and sliding scoring.

Mini Program—Five-star evaluation function

1. Completed requirements:

• Support half-star rating
• Click rating
• Sliding rating

[Related learning recommendations: Mini program development tutorial】

2. Principle

• Page layout

/*wxss 一行内展示五颗星并设置其间距为30rpx*/
.scoreContent {display: inline-block;}
.starLen {margin-right: 30rpx;display: inline-block;}
.scoreContent .starLen:last-child {margin-right: 0;}
.star {width: 80rpx;height: 80rpx;vertical-align: text-bottom;display: inline-block;}

/*wxml 每个starLen元素上绑定 touchMove touchEnd tap事件*/
<view class="scoreContent" id="scoreContent">
  <block wx:for=&#39;{{5}}&#39; wx:key=&#39;item&#39;>
    <!-- 遍历评分列表 -->
    <view class=&#39;starLen&#39; catchtouchmove=&#39;changeScore&#39; catchtouchend="changeScoreEnd" catchtap=&#39;setScore&#39; data-index="{{index}}">
      <!-- 使用三目运算符来动态变化显示的是哪张图片,score是js中的分数,index是scoreArray的下标 -->
      <image class=&#39;star&#39; src="{{score>index?(score>index+0.5?fullStarUrl:halfStarUrl):nullStarUrl}}" />
    </view>
  </block>
</view>

What is important in the above rendering is what kind of icon should be displayed by the trinocular operation. The index is the element subscript of the scoreArray. The subscript index of each item must be compared with the score. The rules are as follows:

//取 score与index下标做比较,默认score为0
score<index    展示nullStar.png

score>index+0.5  展示fullStar.png

index<score<=index+0.5 展示halfStar.png

• data default value

  /**
   * 组件的初始数据
   */
  data: {
    fullStarUrl: '/images/full.png', //满星图片
    halfStarUrl: '/images/half.png', //半星图片
    nullStarUrl: '/images/null.png', //空星图片
    score: 0, //评价分数
    rate: 2,  //设计稿宽度÷屏幕实际宽度
    startX: 0, //第一颗星screenX的距离
  },

• Component loading, data initialization

//设定比率rate与第一颗星screenX    组件初始化attached  或者 页面初始化onShow
attached: function () { // 在组件实例进入页面节点树时执行
  let { screenWidth } = wx.getSystemInfoSync();
  let rate = screenWidth / 750;
  this.setData({
    rate: rate
  })
  
  const query = this.createSelectorQuery();
  query.select('#scoreContent').boundingClientRect((res)=> {
    this.setData({
      startX: res.left
    })
  }).exec()
},

• Click rating

  Click once for half a star, click twice for full star;

  For example: click is the 4th star (index="3 "), the first three stars are filled with full stars, and the current clicked star is a switching display between half stars and full stars

  setScore(e) {
    //e.currentTarget.dataset.index 为当前的item的下标
    let score = e.currentTarget.dataset.index + 1;//实际的score
    if (score - this.data.score == 0.5) {//当前半星与整星的切换
      this.setData({
        score: score
      })
    } else {//点击其他星设置的分数
      this.setData({
        score: score - 0.5
      })
    }
  },

• Sliding rating (key part)

  changeScore: function (e) {
    let score = 0;
    let restLen = 0; //(当前触摸点距初始点距离)-整数倍*(星星宽+星星之间间距)的剩余距离
    let intMult = 0; //取余后的整星数量
    var touchX = e.touches[0].pageX; //获取当前触摸点X坐标
    var starMinX = this.data.startX; //最左边第一颗星的X坐标
    var starWidth = 80 * this.data.rate; //星星图标的宽度,假设80(已在wxss文件中设置".star")
    var starLen = 30 * this.data.rate; //星星之间的距离假设为30(已在wxss文件中设置".starLen")
    var starMaxX = starMinX + starWidth * 5 + starLen * 4; //最右侧星星最右侧的X坐标,需要加上5个星星的宽度和4个星星间距
  
    if (touchX >= starMinX && touchX <= starMaxX) { //点击及触摸的初始位置在星星所在空间之内
      //使用Math.ceil()方法取得当前触摸位置X坐标相对于(星星+星星间距)之比的整数,确定当前点击的是第几个星星
      intMult = Math.floor((touchX - starMinX) / (starWidth + starLen));
      restLen = (touchX - starMinX) - intMult * (starWidth + starLen);
  
      if (0 <= restLen && restLen < 0.5 * starWidth) { //空星
        score = intMult
      } else if (0.5 * starWidth <= restLen && restLen < starWidth) { //显示半星
        score = intMult + 0.5
      } else if (starWidth <= restLen) { //显示整星
        score = intMult + 1;
      }
      if (score != this.data.score) { //如果当前得分不等于刚设置的值,才赋值,因为touchmove方法刷新率很高,这样做可以节省点资源
        this.setData({
          score: score,
        })
      }
    } else if (touchX < starMinX) { //如果点击或触摸位置在第一颗星星左边,则恢复默认值,否则第一颗星星会一直存在
      this.setData({
        score: 0,
      })
    } else if (touchX > starMaxX) {
      this.setData({
        score: 5,
      })
    }
  },

  For more programming related knowledge, please visit: Programming Video! !

  The above is the detailed content of A brief discussion on how mini programs implement the 'five-star evaluation' function (supports click + slide). For more information, please follow other related articles on the PHP Chinese website!