微信小程序 五星评分(包括半颗星评分)实例代码
更新时间：2016年12月14日 14:23:47 投稿：lqh
这篇文章主要介绍了微信小程序 五星评分(包括半颗星评分)实例代码的相关资料,需要的朋友可以参考下
微信小程序 五星评分
一位同学说要写五星评分.要有半颗星的评分.
于是我做了个玩具.有空了做模块化,这代码看不下去了.
代码:
1.index.wxml
<!--index.wxml-->
<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>
<view class="item" style="left:75rpx" data-key="{{item+1}}" bindtap="selectRight"></view>
</image>
</block>
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
})
}
})
代码下载
感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！
相关文章
网站上面有这种切换效果...2006-06-06
这篇文章主要介绍了微信小程序 Record API详解及实例代码的相关资料,需要的朋友可以参考下2016-09-09
这篇文章主要为大家介绍了Fabric.js 样式不更新解决方法案例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-02-02
这篇文章主要介绍了详解微信小程序 相对定位和绝对定位的相关资料,需要的朋友可以参考下2017-05-05
这篇文章主要为大家介绍了requestAnimationFrame使用示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-02-02
这篇文章主要为大家介绍了JS前端使用Canvas快速实现手势解锁特效，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
这篇文章主要介绍了微信小程序 动态绑定事件并实现事件修改样式的相关资料,需要的朋友可以参考下2017-04-04
详解requestAnimationFrame和setInterval该如何选择
这篇文章主要为大家介绍了requestAnimationFrame和setInterval该如何选择示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪<BR>2023-03-03
这篇文章主要为大家介绍了JavaScript单例模式能不能去实例只留单原理解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
这篇文章主要介绍了微信小程序 wxapp视图容器 view详解的相关资料,附简单实例和实现效果图，帮助大家学习参考，需要的朋友可以参考下2016-10-10
最新评论