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 一行內(nèi)展示五顆星并設(shè)置其間距為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 每個(gè)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}}">
      <!-- 使用三目運(yùn)算符來動(dòng)態(tài)變化顯示的是哪張圖片,score是js中的分?jǐn)?shù),index是scoreArray的下標(biāo) -->
      <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下標(biāo)做比較,默認(rèn)score為0
score<index    展示nullStar.png

score>index+0.5  展示fullStar.png

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

• data default value

  /**
   * 組件的初始數(shù)據(jù)
   */
  data: {
    fullStarUrl: '/images/full.png', //滿星圖片
    halfStarUrl: '/images/half.png', //半星圖片
    nullStarUrl: '/images/null.png', //空星圖片
    score: 0, //評價(jià)分?jǐn)?shù)
    rate: 2,  //設(shè)計(jì)稿寬度÷屏幕實(shí)際寬度
    startX: 0, //第一顆星screenX的距離
  },

• Component loading, data initialization

//設(shè)定比率rate與第一顆星screenX    組件初始化attached  或者 頁面初始化onShow
attached: function () { // 在組件實(shí)例進(jìn)入頁面節(jié)點(diǎn)樹時(shí)執(zhí)行
  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 為當(dāng)前的item的下標(biāo)
    let score = e.currentTarget.dataset.index + 1;//實(shí)際的score
    if (score - this.data.score == 0.5) {//當(dāng)前半星與整星的切換
      this.setData({
        score: score
      })
    } else {//點(diǎn)擊其他星設(shè)置的分?jǐn)?shù)
      this.setData({
        score: score - 0.5
      })
    }
  },

• Sliding rating (key part)

  changeScore: function (e) {
    let score = 0;
    let restLen = 0; //(當(dāng)前觸摸點(diǎn)距初始點(diǎn)距離)-整數(shù)倍*(星星寬+星星之間間距)的剩余距離
    let intMult = 0; //取余后的整星數(shù)量
    var touchX = e.touches[0].pageX; //獲取當(dāng)前觸摸點(diǎn)X坐標(biāo)
    var starMinX = this.data.startX; //最左邊第一顆星的X坐標(biāo)
    var starWidth = 80 * this.data.rate; //星星圖標(biāo)的寬度,假設(shè)80(已在wxss文件中設(shè)置".star")
    var starLen = 30 * this.data.rate; //星星之間的距離假設(shè)為30(已在wxss文件中設(shè)置".starLen")
    var starMaxX = starMinX + starWidth * 5 + starLen * 4; //最右側(cè)星星最右側(cè)的X坐標(biāo),需要加上5個(gè)星星的寬度和4個(gè)星星間距
  
    if (touchX >= starMinX && touchX <= starMaxX) { //點(diǎn)擊及觸摸的初始位置在星星所在空間之內(nèi)
      //使用Math.ceil()方法取得當(dāng)前觸摸位置X坐標(biāo)相對于(星星+星星間距)之比的整數(shù),確定當(dāng)前點(diǎn)擊的是第幾個(gè)星星
      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) { //如果當(dāng)前得分不等于剛設(shè)置的值,才賦值,因?yàn)閠ouchmove方法刷新率很高,這樣做可以節(jié)省點(diǎn)資源
        this.setData({
          score: score,
        })
      }
    } else if (touchX < starMinX) { //如果點(diǎn)擊或觸摸位置在第一顆星星左邊,則恢復(fù)默認(rèn)值,否則第一顆星星會(huì)一直存在
      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!