小程序组件之星级评分

在很多场景中我们会评价某些商品，从而让其他后来者对某个商品有一定的参考意义，那么我们在小程序中应该如何实现呢？

淘宝中的评价效果：

那么如何使用小程序实现该功能呢？老样子，先附上效果图：

源码

• index.wxml

<!--pages/main/main.wxml-->
<navigator url="../index/index">
    <button class="mybtn" type="primary">打分</button>
</navigator>

<navigator url="../show/show">
    <button class="mybtn" type="primary">显示评分</button>
</navigator>

• index.wxml

<!--index.wxml-->
<view >

    <block wx:for="{{stars}}">
      <image class="star-image" style="left: {{item*100}}rpx" src="{{key > item ?(key-item == 0.5?halfSrc:selectedSrc) : normalSrc}}">
        <view class="item" style="left:0rpx" data-key="{{item+0.5}}" bindtap="selectLeft"></view>
        <view class="item" style="left:50rpx" data-key="{{item+1}}" bindtap="selectRight"></view>
      </image>
    </block>
  <view style="margin-top:450rpx">
    <button bindtap="startRating">确认</button>
  </view>
</view>

• index.js

//index.js
var app = getApp()
var count = 0;
Page({
  data: {
    stars: [0, 1, 2, 3, 4],
    normalSrc: '../../images/no-star.png',
    selectedSrc: '../../images/full-star.png',
    halfSrc:'../../images/half-star.png',
    key: 0,//评分
  },
  onLoad: function () {
  },
  //点击左边,半颗星
  selectLeft: function (e) {
    var key = e.currentTarget.dataset.key
     if (this.data.key == 0.5 && e.currentTarget.dataset.key == 0.5) {
    //只有一颗星的时候,再次点击,变为0颗
       key = 0;
    }
    count = key
    this.setData({
      key: key
    })

  },
  //点击右边,整颗星
  selectRight: function (e) {
    var key = e.currentTarget.dataset.key
    count = key
    this.setData({
      key: key
    }) 
  },
  startRating:function(e){
    wx.showModal({
    title: '分数',
    content: ""+count,
    success: function(res) {
      if (res.confirm) {
        console.log('用户点击确定')
      }
    }
  })
  }
})

• show.wxml

<!--pages/show/show.wxml-->
<view class="stars">
  <block wx:for="{{stars}}" wx:for-item="item">
    <image src="../../images/{{item}}-star.png" class="star"></image>
  </block>
  <form bindsubmit="formSubmit" bindreset="formReset">
      <input name="input" style="margin-bottom:20rpx" class="c_Input" placeholder="请输入评分"/>
      <button style="background-color:#0066FF;color:white" formType="submit">确定</button>
  </form>
</view>

• show.js

// pages/show/show.js
Page({
  data:{
    "stars":''
  },
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数

  },
  onReady:function(){
    // 页面渲染完成

  },
  onShow:function(){
    // 页面显示
    var that = this;
    var renderData = {
              "stars":that.starCount(0)
            };
    that.setData(renderData)
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  },
  //计算行星显示规则
  starCount:function(originStars){
    //计算星星显示需要的数据，用数组stars存储五个值，分别对应每个位置的星星是全星、半星还是空星
    var starNum = originStars*10/10,stars = [],i = 0;
    do{
      if(starNum>=1){
        stars[i] = 'full';
      }else if(starNum>=0.5){
        stars[i] = 'half';
      }else{
        stars[i] = 'no';
      }
      starNum--;
      i++;
    }while(i<5)
    return stars;
  },
    formSubmit: function(event) {
        var that = this;
    var renderData = {
              "stars":that.starCount(event.detail.value.input)
            };
    that.setData(renderData);
  }
})

实例下载

• [百度云]微信小程序组件之星级评分
• [Coding]微信小程序组件之星级评分