如何在微信小程序中實現星級評價效果

如何在微信小程序中實現星級評價效果？相信很多沒有經驗的人對此束手無策，為此本文總結了問題出現的原因和解決方法，通過這篇文章希望你能解決這個問題。

wxml代碼部分：

<view class='topMaxBox'>
 <view class='topLeft' style='width: {{ imgW }}px; height: {{ imgW }}px; flex: {{ imgW }}px 0 0;'>
 <image src='http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg'></image>
 </view>
 <view class='topRight'>
 <view class='r_top'>
 <text>商品名稱</text>
 <text>{{ evaluate }}</text>
 </view>
 <view class='r_bottom' catchtouchmove='moveFun' catchtouchstart='moveFun'>
 <image src='{{ starSrc }}'></image>
 </view>
 </view>
</view>

wxss代碼部分：

.topMaxBox{
 padding: 5%;
 display: flex;
 flex-direction: row;
}

.topLeft{
 border: 1px solid #e5e5e5;
 margin-right: 10px;
}

.topLeft image{
 width: 100%;
 height: 100%;
}

.topRight{
 flex: 1;
 display: flex;
 flex-direction: column;
 justify-content: center;
}

.r_top{
 display: flex;
 justify-content: space-between;
 margin-bottom: 2%;
}

.r_bottom image{
 width: 130px;
 height: 18px;
}

app.sysInfo()封裝在了app.js 文件全局使用下面是代碼部分

 /**
 * 獲取系統信息
 */
 sysInfo: function () {
 let res = wx.getSystemInfoSync();
 let info = {
 width: res.windowWidth,//可使用窗口寬度
 height: res.windowHeight,//可使用窗口高度
 system: res.system,//操作系統版本
 statusBarHeight: res.statusBarHeight//狀態欄的高度
 }
 return info;
 },

js代碼部分：

const app = new getApp();

// page/issueEvaluate/issueEvaluate.js
Page({

 /**
 * 頁面的初始數據
 */
 data: {
 imgW: app.sysInfo().width * 0.146,//根據屏幕寬度動態設置圖片寬度
 starLen: 5,//星星評價的初始等級
 starSrcArr: ['../../image/star2-1.png', '../../image/star2-2.png', '../../image/star2-3.png', '../../image/star2-4.png', '../../image/star2-5.png', '../../image/star2-6.png'],//星星評價的圖片資源數組
 starSrc: '../../image/star2-6.png',//星星評價的初始圖片
 evaluate: '非常好',
 evaluateArr: ['非常差', '差', '一般', '好', '比較好', '非常好']
 },

 moveFun: function (e) {
 let imgBoxW = app.sysInfo().width * 0.146 + 10;//商品圖片X軸盡頭坐標(即星星的初始坐標值)
 let starW = 130 / 5;//每一顆星星的寬度(用于計算星星的X軸坐標)
 let xAxial = e.touches[0].clientX;//獲取當前觸摸的X軸坐標

 //如果當前觸摸的X軸坐標小于初始坐標則顯示為0顆星星
 if (xAxial < imgBoxW) {
 this.data.starLen = 0;
 //如果當前觸摸的X軸坐標大于初始坐標并小于第2顆星星的初始坐標則顯示為1顆星星
 } else if (imgBoxW + (starW * 2) > xAxial && xAxial > imgBoxW) {
 this.data.starLen = 1;
 //如果當前觸摸的X軸坐標大于第2顆星星的初始坐標并小于第3顆星星的初始坐標則顯示為2顆星星
 } else if (imgBoxW + (starW * 3) > xAxial && xAxial > imgBoxW + (starW * 2)) {
 this.data.starLen = 2;
 //如果當前觸摸的X軸坐標大于第3顆星星的初始坐標并小于第4顆星星的初始坐標則顯示為3顆星星
 } else if (imgBoxW + (starW * 4) > xAxial && xAxial > imgBoxW + (starW * 3)) {
 this.data.starLen = 3;
 //如果當前觸摸的X軸坐標大于第4顆星星的初始坐標并小于第5顆星星的初始坐標則顯示為4顆星星
 } else if (imgBoxW + (starW * 5) > xAxial && xAxial > imgBoxW + (starW * 4)) {
 this.data.starLen = 4;
 //如果當前觸摸的X軸坐標大于第5顆星星初始坐標則顯示為5顆星星
 } else if (xAxial > imgBoxW + (starW * 5)) {
 this.data.starLen = 5;
 }
 //設置img標簽的SRC路徑 替換成對應的星星圖片
 this.data.starSrc = this.data.starSrcArr[this.data.starLen];
 //設置為對應的評價等級文字
 this.data.evaluate = this.data.evaluateArr[this.data.starLen];
 this.setData({
 starSrc: this.data.starSrc,
 evaluate: this.data.evaluate
 });
 },

})

看完上述內容，你們掌握如何在微信小程序中實現星級評價效果的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！