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

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

微信小程序 五星评分

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

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

代码:

1.index.wxml

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微信小程序开发专栏:hthttp://tp://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

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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。