微信小程序实现星级评分与展示

本文实例为大家分享了微信小程序实现星级评分与展示的具体代码，供大家参考，具体内容如下

一、效果展示

星级评分

星级评分展示

二、代码实现

星级评分部分：

<!-- wxml -->
<view class="starGrade">
  <text class="starGradeTxt">评价</text>
  <view class='scoreBox'>
    <view wx:for="{{starImgs}}" wx:key="id" bindtap='select' data-index="{{item.id}}">
      <image class="star" src="{{item.id > starId  star_empty : star_full}}"></image>
    </view>
    <view class='scoreLevel'>{{starImgs[starId - 1].level}}</view>
  </view>
</view>

// js
Page({
  data:{
    starImgs: [
      {
        id: 1,
        level : '非常不推荐',
      },
      {
        id: 2,
        level : '不推荐',
      },
      {
        id: 3,
        level : '一般',
      },
      {
        id: 4,
        level : '推荐',
      },
      {
        id: 5,
        level : '非常推荐',
      }
    ],
    starId: 5,
    star_full: '/icons/score_full_big.png',//星星图标 满星
    star_empty: '/icons/score_empty_big.png',//星星图标 空星
  },
 
  /**
  * 星级评分点击事件
  */
  select(e) {
    this.data.starId = e.currentTarget.dataset.index;
    this.setData({
      starId : this.data.starId,
    })
  },
})

星级评分展示

<!-- wxml -->
<wxs module="filters" src="../../tools/filter.wxs"></wxs>
<!-- 星级评分展示 -->
<view class="container">
  <text class="score">{{filters.toFix(Info.grade)}}</text>
  <view
    class="stars"
    wx:for="{{[1, 2, 3, 4, 5]}}"
    wx:key="{{index}}"
    wx:for-item="i">
    <view class="star-full" wx:if="{{Info.grade >= index + 1}}">
      <image class="image-star" src="../../icons/score_full.png" />
    </view>
    <view class="star-empty" wx:else>
      <image class="image-star" src="../../icons/score_empty.png" />
    </view>
  </view>
</view>

// filter.wxs
var filters = {
  toFix: function (value) {   
    var valueNum = parseFloat(value);
    return valueNum.toFixed(1)
    // 保留一位小数
  }
}

module.exports = {
  toFix: filters.toFix,
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持源码搜藏网。