微信小程序：制作星星评价代码分享

2022-07-23 16:53:46

不管是商城、O2O等类型的小程序都需要用到评价，而星星评价是最常用的类型，优加网络今天分享平时在项目制作中如何实现星星评价。

评价结果

上图是评价后的结果，主要分为三项评价，平均得出综合评价，那么就需要用户选择三项星星评价,如下图

提交评价

实现的要点是如何通过点击星星自动实现评价效果，如点击第三颗星星就自动变成3星。

WXML代码如下

<view class="container">

<view class="comment_box">

<form bindsubmit="add_comment" report-submit="true">

<view class="comment_item">

<view class="comment_item_t">服务态度得分view>

<view class="comment_item_star">

<view class="star {{star_1>=1? '': 'star_gray'}}" bindtap="change_star" data-item="star_1" data-star="1" >view>

<view class="star {{star_1>=2? '': 'star_gray'}}" bindtap="change_star" data-item="star_1" data-star="2">view>

<view class="star {{star_1>=3? '': 'star_gray'}}" bindtap="change_star" data-item="star_1" data-star="3">view>

<view class="star {{star_1>=4? '': 'star_gray'}}" bindtap="change_star" data-item="star_1" data-star="4">view>

<view class="star {{star_1>=5? '': 'star_gray'}}" bindtap="change_star" data-item="star_1" data-star="5">view>

view>

view>

<view class="comment_item">

<view class="comment_item_t">服务质量得分view>

<view class="comment_item_star">

<view class="star {{star_2>=1? '': 'star_gray'}}" bindtap="change_star" data-item="star_2" data-star="1">view>

<view class="star {{star_2>=2? '': 'star_gray'}}" bindtap="change_star" data-item="star_2" data-star="2">view>

<view class="star {{star_2>=3? '': 'star_gray'}}" bindtap="change_star" data-item="star_2" data-star="3">view>

<view class="star {{star_2>=4? '': 'star_gray'}}" bindtap="change_star" data-item="star_2" data-star="4">view>

<view class="star {{star_2>=5? '': 'star_gray'}}" bindtap="change_star" data-item="star_2" data-star="5">view>

view>

view>

<view class="comment_item">

<view class="comment_item_t">服务效率得分view>

<view class="comment_item_star">

<view class="star {{star_3>=1? '': 'star_gray'}}" bindtap="change_star" data-item="star_3" data-star="1">view>

<view class="star {{star_3>=2? '': 'star_gray'}}" bindtap="change_star" data-item="star_3" data-star="2">view>

<view class="star {{star_3>=3? '': 'star_gray'}}" bindtap="change_star" data-item="star_3" data-star="3">view>

<view class="star {{star_3>=4? '': 'star_gray'}}" bindtap="change_star" data-item="star_3" data-star="4">view>

<view class="star {{star_3>=5? '': 'star_gray'}}" bindtap="change_star" data-item="star_3" data-star="5">view>

view>

view>

<view class="comment_text">

<textarea name='detail' placeholder='输入评价内容'>textarea>

view>

<view class="btn">

<button form-type="submit">确定提交button>

view>

form>

view>

view>

WXSS代码如下：

.container {

background: #f0f0f0;

}

.comment_box{

width:100%;

}

.comment_item{

width:100%;

padding:0 20rpx;

height:100rpx;

line-height:100rpx;

display:flex;

flex-direction:row;

justify-content:space-between;

box-sizing:border-box;

border-bottom:1px dotted #eee;

background-color:#fff;

}

.comment_item_t{

font-size:32rpx;

height:100rpx;

line-height:100rpx;

color: #333333;

}

.comment_item_star{

display:flex;

flex-direction:row;

}

.comment_item_star .star{

z-index: 1;

width:80rpx;

height:100rpx;

background-image: url("亮色星星图片");

background-size:20px 19px;

background-position:center center;

background-repeat:no-repeat;

}

.comment_item_star .star_gray{

background-image: url("灰色星星图片");

}

.comment_text textarea{

width:100%;

height:256rpx;

font-size:32rpx;

line-height:64rpx;

color: #333333;

background: #fff;

padding:20rpx;

box-sizing:border-box;

}

.btn button{

width: 670rpx;

height: 90rpx;

line-height:90rpx;

background: #ffda44;

border-radius: 45rpx;

font-size: 32rpx;

margin: 40rpx 40rpx 60rpx 40rpx;

color: #333;

}

JS代码如下

var util = require('../../utils/util.js')

var app = getApp()//获取应用实例

Page({

data: {

star_1: 0,

star_2: 0,

star_3: 0,

order_id:0

},

onLoad:function(e) {

var that = this

var order_id = e.order_id

that.setData({

order_id:order_id

})

},

change_star:function(e) {

var that = this

var star_item = e.currentTarget.dataset.item

var star = e.currentTarget.dataset.star

if (star_item == 'star_1') {

that.setData({

star_1: star

});

}else if(star_item == 'star_2') {

that.setData({

star_2: star

});

} else if (star_item == 'star_3') {

that.setData({

star_3: star

});

}

},

add_comment:function(e) {

var that = this

var star_1 = that.data.star_1

var star_2 = that.data.star_2

var star_3 = that.data.star_3

var detail = e.detail.value.detail

if(star_1 == 0) {

util.showNotice("请针对服务态度打分!")

} else if (star_2 == 0) {

util.showNotice("请针对服务质量打分!")

} else if (star_3 == 0) {

util.showNotice("请针对服务效率打分!")

} else if (detail == "") {

util.showNotice("请填写评价内容!")

} else {

var order_id = that.data.order_id

var session3rd = wx.getStorageSync('session3rd')

var post_data = {

"session3rd": session3rd,

"order_id": order_id,

"star_1": star_1,

"star_2": star_2,

"star_3": star_3,

"detail": detail,

"ctype": 1

}

var url_comment = util.getApiUrl(app, "/Comment/add", "")

util._post_from(url_comment, post_data, function (res) {

console.log('评价侠客返回')

console.log(res)

if (res.data.code = '200') {

wx.showModal({

content: '提交评论成功',

showCancel:false,

success:function(val) {

app.globalData.is_need_update_post_info = true

wx.navigateBack()

}

})

} else {

util.showNotice(res.data.msg)

}

})

}

}

})

以上基本就实现了星星评价效果。

网站声明：以上文章内容为优加的原创文章，如需转载，请注明出处，谢谢合作！

企业网站建设佛山网站设计佛山h5响应式网站制作

0 喜欢

523 浏览数

优加商学院

254

APP开发微信小程序开发网站开发

TOP榜单

开发一个装修师傅接单平台小程序项目

我们开发了一个“装修师傅接单平台”小程序项目，旨在为用户和装修师傅之间搭建一个连接的桥梁。在我们的平台上，用户可以轻松发布自己的装修需求，而装修师傅则可以自由地接单并完成相应的任务

百度的索引量怎么提高

网站上线运营后离不开搜索引擎的推广，现在内卷的社会中每个人其实都通过各种方法获得有价值的流量，你做的事情别人同样也在做，所以未来拼的是团队、和认知了。

微信小程序商城开发整个流程有怎么样的？

从需求分析、UI设计、后台管理、接口开发、测试上线到运营维护等多个方面，都需要精心制定和实施。下面将对每个步骤进行更详细的介绍。

我现在的网站因为采集了大量的文章被降权了不知道怎么办？

网站经营中可能会遇到各种各样的问题，下面分享我网站因采集被降权的经历。

微信小程序开发步骤和如何推广

小程序已经成为了一种非常流行的移动应用，很多企业和开发者都开始关注并且使用它们来提供更好的用户体验。微信小程序是其中最受欢迎的一个，因为它已经被很多人广泛使用，并且有着强大的社交功能。在本文中，我们将介绍如何开发微信小程序，以及一些关于如何推广微信小程序的技巧。

佛山小程序开发公司报价为什么相差那么大呢？

随着2023年经济强势复苏，接待客户的频率也和2019年对接得上了，无论这世界怎么变打电话进来问报价的方式还是不变的，我们也不会强制要求约谈见面才可以给出报价，基本上大致需求大致报价。

开发一个装修师傅接单平台小程序项目

微信小程序商城开发整个流程有怎么样的？

从需求分析、UI设计、后台管理、接口开发、测试上线到运营维护等多个方面，都需要精心制定和实施。下面将对每个步骤进行更详细的介绍。

我现在的网站因为采集了大量的文章被降权了不知道怎么办？

网站经营中可能会遇到各种各样的问题，下面分享我网站因采集被降权的经历。

佛山小程序开发公司报价为什么相差那么大呢？

chatgpt真的可以开发小程序吗？

OpenAI旗下的chatgpt到底有多智能？相信最近不少朋友都被各大视频号或文章或朋友圈进行强制性知识普及了吧，下面我们来聊下chatgpt现状和未来。

微信商户号运营账户结算方式调整佛山小程序开发客户注意了

最近因微信商户号的调整2023年1月1日起，逐步调整“企业付款到零钱”的出资额度至单笔500元。并且将推出“商家转账到零钱”产品，这段时间都为过渡期，如有客户有提现或分销、分账的请及时联系处理。

微商云仓免囤货一键提货系统

小程序B2C商城

无纸化考试系统

知识付费音视频系统

独立社区团购系统

多功能排行榜系统