本篇文章給大家介紹一下小程序?qū)崿F(xiàn)“五星評(píng)價(jià)”功能的方法，支持實(shí)現(xiàn)點(diǎn)擊評(píng)分、滑動(dòng)評(píng)分。

小程序— 五星評(píng)價(jià)功能

1、已完成需求：

• 支持半星評(píng)價(jià)
• 點(diǎn)擊評(píng)分
• 滑動(dòng)評(píng)分

【相關(guān)學(xué)習(xí)推薦：小程序開發(fā)教程】

2、原理

• 頁面布局

/*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='{{5}}' wx:key='item'>     <!-- 遍歷評(píng)分列表 -->     <view class='starLen' catchtouchmove='changeScore' catchtouchend="changeScoreEnd" catchtap='setScore' data-index="{{index}}">       <!-- 使用三目運(yùn)算符來動(dòng)態(tài)變化顯示的是哪張圖片,score是js中的分?jǐn)?shù),index是scoreArray的下標(biāo) -->       <image class='star' src="{{score>index?(score>index+0.5?fullStarUrl:halfStarUrl):nullStarUrl}}" />     </view>   </block> </view>

以上渲染中重要的是，三目運(yùn)算所要展示的應(yīng)該是哪種圖標(biāo)，index為scoreArray的元素下標(biāo)，每一個(gè)item的下標(biāo)index都要與score進(jìn)行比較，規(guī)則如下：

//取 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預(yù)設(shè)值

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

• 組件加載、數(shù)據(jù)做初始化

//設(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() },

• 點(diǎn)擊評(píng)分

  點(diǎn)擊1次半星，點(diǎn)擊2次整星；

  例如：點(diǎn)擊是第4顆星(index="3")，前三顆星為整星填充，當(dāng)前點(diǎn)擊星為半星與整星的切換展示

  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     })   } },

• 滑動(dòng)評(píng)分(關(guān)鍵部分)

  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)相對(duì)于(星星+星星間距)之比的整數(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,     })   } },