Original link: https://mp.weixin.qq.com/s/d_BcA6uX_8MDO89Ta0CpnA
1
Overview
When we are learning WeChat mini-programs or doing projects, we should encounter the effect of five-star ratings , so how should we write the functions of five-star ratings and half-stars?
Today we will talk about the realization of the WeChat applet five-star rating and half-star effect , and share such a small tutorial today. Hope to be helpful to everyone .
Go get a small bench and wait for more updates
wxml
<!--index.wxml-->
<block wx:for="{{stars}}" wx:key="">
<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>
js
//index.js
//获取应用实例
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
})
}
})
/**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;
}
The above code is the effect of Figure 2
Welfare at the end of the sentence:
Benefit 1: A collection of 100G resources such as front-end, Java, product manager, WeChat applet, Python, etc. will be released : https://www.jianshu.com/p/e8197d4d9 880
Welfare 2: A full set of detailed video tutorials for WeChat mini-program introduction and actual combat.
【How to receive】
Pay attention to [Programming Micro Journal] WeChat public account:
Reply to [Mini Program Demo] One-click to receive 130 Wechat Mini Program source code demo resources.
Reply [Receive resources] One-click to receive front-end, Java, product manager, WeChat applet, Python and other resource collections 100G resources to be released.