小程序 - 五星评价系统（状态支持满星点亮半星点亮不点亮）

在小程序的开发过程中，我们会遇到一种情况，就是在制作五星点评的时候，默认五颗星星都是要亮的。这里我们就要分享一下自己做默认五星的心得。

在这里我们先看一下效果图：

我们在订单页面的时候，当点击“晒单”按钮的时候我们跳转到评价的页面，比较简单直接上代码。

WXML代码：

<view style="width: 100%; height: 200rpx;"></view><!-- 星星打分 -->
<view class="scoreView"><!-- 五星点评区域 --><view class="stu-score-view"><block wx:for='{{stars_text}}' wx:key='textItem' wx:for-index='textIndex'><!-- 每一项点评，数据多少项遍历多少排 --><view class='stu-score-view1'><!-- 产品需求是能让用户自己输入五星点评类型，所以在此使用input --><!-- 对应数据 ['描述相符', '物流服务', '购买体验', '沟通情况'] --><input class="stu-score-text" type="text" placeholder="{{item}}" disabled /><!-- 遍历星icon 因为支持半星所以要循环遍历十次 对应数据 [0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 4.5, 5]--><block wx:for='{{stars_num}}' wx:key='starsItem' wx:for-item="starsItem" wx:for-index='starsIndex'><!-- 外层用盒子包裹 内层是图片，因为支持半星，所以盒子宽度是图片的一半，需要显示左边还是右边通过改变class实现 --><view class="{{starsItem%1 == 0 ? 'score_box2' : 'score_box1'}}" catchtap="starsClick" data-score="{{starsItem}}" data-index="{{textIndex}}"><!-- 图片 --><image class="{{starsItem%1 == 0 ? 'score_stars2' : 'score_stars1'}}" src="{{stars_score[textIndex] >= starsItem ?stars_select : stars_unselect}}"></image></view></block></view></block></view><!-- 总星区域 --><view class="scoreView1"><text class="scoreText">{{sunScore}}</text><text class="scoreText1">总星</text></view>
</view>

JS代码：

Page({/*** 页面的初始数据*/data: {stars_text: ['描述相符', '物流服务', '购买体验', '沟通情况'], // 每项评分的标题stars_score: [3.5, 3, 4.5, 5], // 每项点亮的星星数stars_num: [0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 4.5, 5], // 每个星星代表的数字stars_select: '../../../image/stars_select.png', // 星星图标(灰)stars_unselect: '../../../image/stars_unselect.png', // 星星图标(亮)sunScore: 16, // 总星},//星星点击starsClick: function (e) {let that = this,score = e.currentTarget.dataset.score,index = e.currentTarget.dataset.index;that.data.stars_score[index] = score;let sunScore = 0;for (let i = 0; i < that.data.stars_score.length; i++) {sunScore += that.data.stars_score[i];}that.setData({stars_score: that.data.stars_score,sunScore: sunScore})},
})

WCSS代码

/* 评分 */
.scoreView {width: 95%;margin-left: 46rpx;display: flex;flex: 1;align-items: center;margin-bottom: 14rpx;
}.stu-score-view {width: 540rpx;
}.stu-score-view1 {height: 60rpx;line-height: 50rpx;align-items: center;display: flex;
}.stu-score-text {width: 184rpx;font-size: 30rpx;border: 1px solid #ccc;border-radius: 8rpx;display: inline-block;padding: 0 30rpx;margin-right: 12rpx;box-sizing: border-box;
}.score_box1 {width: 24rpx;height: 48rpx;overflow: hidden;padding-left: 8rpx;
}.score_box2 {width: 24rpx;height: 48rpx;overflow: hidden;padding-right: 8rpx;
}.score_stars1 {width: 48rpx;height: 48rpx;
}.score_stars2 {width: 48rpx;height: 48rpx;margin-left: -24rpx;
}.scoreView1 {width: 100rpx;
}.scoreText {font-size: 34rpx;font-family: DINAlternate-Bold, DINAlternate;font-weight: bold;color: rgba(77, 77, 77, 1);line-height: 40rpx;flex: 1;display: flex;margin-left: 4rpx;justify-content: center;
}.scoreText1 {font-size: 26rpx;font-family: PingFangSC-Regular, PingFang SC;font-weight: 400;color: rgba(77, 77, 77, 1);line-height: 37rpx;display: flex;flex: 1;justify-content: center;
}

注释已经写的很详细了，不啰嗦，图片就留给大家咯：

小程序 - 五星评价系统（状态支持满星点亮半星点亮不点亮）相关推荐

微信小程序五星评价功能实现
实现五星评价功能,效果图如下: .wxml文件: <view class="star-title">1.品质效果</view><view class= ...
php做五星评价系统,微信小程序之五星评价功能制作
这篇文章主要介绍了微信小程序五星评价功能的实现的相关资料,这里附有实例代码及实现效果图,需要的朋友可以参考下微信小程序五星评价功能话不多说,我们来看一下效果图: 要实现的效果:点击到第几颗星, ...
在线答题考试小程序源码系统支持在线刷题+考试二合一+安装部署教程
分享一个在线答题考试小程序源码系统,支持在线刷题+考试二合一,程序包含前后端和详细的安装部署教程,可以用来给学生刷题,给员工刷题,给政企员工刷题,万能通用版适合任何行业在线刷题及考试. 系统功能一览: ...
微信小程序客服系统怎么使用？小程序客服消息有没有什么限制？
越来越多的商家开始使用微信小程序,大批客户涌入,就会面临一个头疼的问题,如何和客户即时对话,怎么高效处理客户消息,所以就需要巧妙运用微信小程序客服系统.那么微信小程序客服系统怎么使用呢? 一.使用微信 ...
小程序电商系统后台功能详解
如何使用小程序电商系统后台,今天小来给大家讲解一下来客小程序电商系统. 首先,我们来看首页,首页上有一些基本的情况,比如说订单的情况待付款.待发货.待收货.待评价.退货等,还有今日营业额.今日订单数. ...
小程序分销商城系统八大功能都有哪些？一起来了解吧
首先小程序分销商城系统我们在开发过程中大致开发的功能模块一共有8大模块,分别是:商品模块,店铺装修模块,会员模块,订单模块,营销模块,统计模块,应用模块,设置模块. 商品模块: 实物商品:已经审核通过 ...
springboot基于微信小程序的选课系统毕业设计源码060000
目录摘要 1 绪论 1.1研究背景 1.2开发意义 1.3系统开发技术的特色 1.4论文结构与章节安排 2选课系统小程序系统分析 2.1 可行性分析 2.2 系统流程分析 2.2.1数据增加流程 ...
2021最新外卖霸王餐小程序、外系统霸王餐H5/APP程序源码|美团/饿了么霸王餐系统粉丝裂变分销源码分享
2021最新外卖霸王餐小程序.外系统霸王餐H5/APP程序源码|美团/饿了么霸王餐系统粉丝裂变分销源码外卖霸王餐系统小程序/H5/APP源码 2021最新霸王餐小程序霸王餐小程序源码地址成品演 ...
springboot基于微信小程序的选课系统060000
目录摘要 1 绪论 1.1研究背景 1.2开发意义 1.3系统开发技术的特色 1.4论文结构与章节安排 2选课系统小程序系统分析 2.1 可行性分析 2.2 系统流程分析 2.2.1数据增加流程 ...

小程序 - 五星评价系统（状态支持满星点亮半星点亮不点亮）

WXML代码：

JS代码：

WCSS代码

小程序 - 五星评价系统（状态支持满星点亮半星点亮不点亮）相关推荐

最新文章

热门文章

小程序 - 五星评价系统（状态支持满星点亮 半星点亮 不点亮）

WXML代码：

JS代码：

WCSS代码

小程序 - 五星评价系统（状态支持满星点亮 半星点亮 不点亮）相关推荐

最新文章

热门文章

小程序 - 五星评价系统（状态支持满星点亮半星点亮不点亮）

小程序 - 五星评价系统（状态支持满星点亮半星点亮不点亮）相关推荐