站長資訊網本篇文章給大家介紹一下小程序實現“五星評價”功能的方法，支持實現點擊評分、滑動評分。
小程序— 五星評價功能
1、已完成需求：
- 支持半星評價
- 點擊評分
- 滑動評分
【相關學習推薦：小程序開發教程】
2、原理
- 頁面布局
/*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='{{5}}' wx:key='item'> <!-- 遍歷評分列表 --> <view class='starLen' catchtouchmove='changeScore' catchtouchend="changeScoreEnd" catchtap='setScore' data-index="{{index}}"> <!-- 使用三目運算符來動態變化顯示的是哪張圖片,score是js中的分數,index是scoreArray的下標 --> <image class='star' src="{{score>index?(score>index+0.5?fullStarUrl:halfStarUrl):nullStarUrl}}" /> </view> </block> </view>
以上渲染中重要的是，三目運算所要展示的應該是哪種圖標，index為scoreArray的元素下標，每一個item的下標index都要與score進行比較，規則如下：
//取 score與index下標做比較,默認score為0 score<index 展示nullStar.png score>index+0.5 展示fullStar.png index<score<=index+0.5 展示halfStar.png
- data預設值
/** * 組件的初始數據 */ data: { fullStarUrl: '/images/full.png', //滿星圖片 halfStarUrl: '/images/half.png', //半星圖片 nullStarUrl: '/images/null.png', //空星圖片 score: 0, //評價分數 rate: 2, //設計稿寬度÷屏幕實際寬度 startX: 0, //第一顆星screenX的距離 },
- 組件加載、數據做初始化
//設定比率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() },
-
點擊評分
點擊1次半星，點擊2次整星；
例如：點擊是第4顆星(index="3")，前三顆星為整星填充，當前點擊星為半星與整星的切換展示
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 }) } }, -
滑動評分(關鍵部分)
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, }) } },
