場景

在電商、醫療等帶有使用者評價的時候，常見的就是對服務等進行星級評定，在小程式中如何更加簡單的實現該功能？

效果圖

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

原理

1. 將需要的圖示（灰色星星和黃色星星）轉行為 base64 儲存在本地檔案中（圖片線上轉換base64工具），例如：本demo中的 iconStar0 和 iconStar1 就儲存在 iconPath.js 檔案，需要用時取出。
2. 迴圈評星級數，由於大多數都是五顆星，因此此處採用陣列[1,2,3,4,5]。
3. 在js 的data中初始化設定預設值 diagnosisStar ，一般設定為 0 ，由於需要，此處設定為 1 。
4. 給每一個星繫結點選事件 getStar ，點選事件是為了獲取當前點選的位置，因此需要在標籤設定 data-star=’{{item}}’，傳點選位。
5. 在 getStar 事件獲取點選位，然後將點選位的值賦值（setData方法）預設值 diagnosisStar ，實現需要的星級效果。

注意

1. 由於我沒有將 WXSS 和 iconPath.js 檔案粘貼出來，所以直接複製程式碼，會看不到改效果。
2. 如果想採用 form 表單提交 diagnosisStar 的值，可以採用在星級的位置影藏一個 input 標籤，來實現值的提交。
3. 此方法僅供參考，如果有更加快捷的方法，歡迎交流。

下載

遊戲列表