微信小程序 五星评分(包括半颗星评分)实例代码

<!--index.wxml-->

<block wx:for="{{stars}}">

 <image class="star-image" style="left: {{item*150}}rpx" src="/UploadFiles/2021-04-02/{{key > item ">

2.index.wxss




.star-image {

 position: absolute;

 top: 50rpx;

 width: 150rpx;

 height: 150rpx;

 src: "../../images/normal.png";

}



.item {

 position: absolute;

 top: 50rpx;

 width: 75rpx;

 height: 150rpx;

}




3.index.js




//index.js

//CSDN微信小程序开发专栏:http://blog.csdn.net/column/details/13721.html

//获取应用实例

var app = getApp()

Page({

 data: {

  stars: [0, 1, 2, 3, 4],

  normalSrc: '../../images/normal.png',

  selectedSrc: '../../images/selected.png',

  halfSrc: '../../images/half.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;

  }

  console.log("得" + key + "分")

  this.setData({

   key: key

  })



 },

 //点击左边,整颗星

 selectRight: function (e) {

  var key = e.currentTarget.dataset.key

  console.log("得" + key + "分")

  this.setData({

   key: key

  })

 }

})




代码下载


star.rar
感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！