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

微信小程序 五星评分

一位同学说要写五星评分.要有半颗星的评分.

于是我做了个玩具.有空了做模块化,这代码看不下去了.

代码:

1.index.wxml

rush:js;">

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

<image class="star-image" style="left: {{item*150}}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 class="item" style="left:75rpx" data-key="{{item+1}}" bindtap="selectRight">

2.index.wxss

rush:js;"> .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

rush: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

})

}

})

代码下载

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