場景
在電商、醫療等帶有用戶評價的時候，常見的就是對服務等進行星級評定，在小程序中如何更加簡單的實現該功能？
效果圖
WXML
<text class='rui-star' wx:for="{{[1,2,3,4,5]}}" wx:key="star1" bindtap='getStar' data-star='{{item}}' style='background:url({{diagnosisStar >= item ? iconPath.iconStar0 : iconPath.iconStar1}}) no-repeat center center/6.7vw 6.7vw;'></text>JS
Page({
data: {diagnosisStar: 1},
// 獲取點擊的星位
getStar(e){
let star = e.currentTarget.dataset.star;
this.setData({ diagnosisStar: star});
}
})原理
- 將需要的圖標（灰色星星和黃色星星）轉行為 base64 儲存在本地文件中（圖片在線轉換base64工具），例如：本demo中的 iconStar0 和 iconStar1 就存儲在 iconPath.js 文件，需要用時取出。
- 循環評星級數，由於大多數都是五顆星，因此此處采用數組[1,2,3,4,5]。
- 在js 的data中初始化設置默認值 diagnosisStar ，一般設置為 0 ，由於需要，此處設置為 1 。
- 給每一個星綁定點擊事件 getStar ，點擊事件是為了獲取當前點擊的位置，因此需要在標簽設置 data-star=’{{item}}’，傳點擊位。
- 在 getStar 事件獲取點擊位，然后將點擊位的值賦值（setData方法）默認值 diagnosisStar ，實現需要的星級效果。
注意
- 由於我沒有將 WXSS 和 iconPath.js 文件粘貼出來，所以直接復制代碼，會看不到改效果。
- 如果想采用 form 表單提交 diagnosisStar 的值，可以采用在星級的位置影藏一個 input 標簽，來實現值的提交。
- 此方法僅供參考，如果有更加快捷的方法，歡迎交流。