脚本宝典收集整理的这篇文章主要介绍了微信小程序星级评分和展示，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
正文：用户点击第几颗星星就显示为几星评分
wXMl文件代码
<view class='assess_sec_img'>
<block wx:for="{{empty_star}}" wx:key="index">
<image catchtap='in_xin' id='{{index+1}}' data-in='use_sc2' src='../../img/star_img.png' class='assess_star_img'></image>
</block>
<block wx:for="{{full_star}}" wx:key="index">
<image catchtap='in_xin' id='{{index+1}}' data-in='use_sc' src='../../img/star_imgs.png' class='assess_star_img'></image>
</block>
</view>
@H_129_126@wxss文件代码
.assess_sec .assess_sec_star .assess_sec_img{
@H_777_146@width: 530rpx;
height: 160rpx;
display: flex;
align-items: center;
float: left;
}
.assess_sec .assess_sec_star .assess_sec_img .assess_star_img{
width: 47rpx;
height: 46rpx;
float: left;
margin: 0 10rpx;
}
js文件代码
Page({
/**
* 页面的初始数据
*/
data: {
empty_star: 0, //未选择星星
full_star: 5 //已选择星星
},
// 用户给评分
in_xin: function(e) {
VAR that = this;
console.LOG(e);
var in_xin = e.currentTarget.dataset.in;
var empty_star;
if (in_xin === 'use_sc2') {
empty_star = Number(e.currentTarget.id) - 1;
console.log(empty_star);
} else {
empty_star = Number(e.currentTarget.id) + that.data.empty_star;
console.log(empty_star);
}
this.setData({
empty_star: empty_star,
full_star: 5 - empty_star
})
},
})
以上是脚本宝典为你收集整理的微信小程序星级评分和展示全部内容，希望文章能够帮你解决微信小程序星级评分和展示所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。