本篇内容主要讲解“怎么用微信小程序实现评价功能”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“怎么用微信小程序实现评价功能”吧!
先是效果图
wxml文件
for循环5次，初始值是5星，data-name用于区别是那个评价的星星
src="{{item-total+1>0?’…/image/empty_stars.png’:’…/image/entity_stars.png’}}"
条件判断，图片判断一个是空星，一个实星，根据自己图片地址改变
计算
安全
数据库
网络和加速
企业服务
<view class="view_page">
<view class="content_cls">
<view class="cross_column" >
<label>总体评价：</label>
<image class="imagecls" wx:for="{{5}}" wx:key="{{index}}" data-name="total" data-item="{{item}}" src="{{item-total+1>0?'../image/empty_stars.png':'../image/entity_stars.png'}}" bindtap="img_bind"></image>
</view>
<view class="cross_column">
<label>服务态度：</label>
<image class="imagecls" wx:for="{{5}}" wx:key="{{index}}" data-name="service" data-item="{{item}}" src="{{item-service+1>0?'../image/empty_stars.png':'../image/entity_stars.png'}}" bindtap="img_bind"></image>
</view>
<view class="cross_column">
<label>施工质量：</label>
<image class="imagecls" wx:for="{{5}}" wx:key="{{index}}" data-name="quality" data-item="{{item}}" src="{{item-quality+1>0?'../image/empty_stars.png':'../image/entity_stars.png'}}" bindtap="img_bind"></image>
</view>
<view class="cross_column">
<label>维修时间：</label>
<image class="imagecls" wx:for="{{5}}" wx:key="{{index}}" data-name="repairtime" data-item="{{item}}" src="{{item-repairtime+1>0?'../image/empty_stars.png':'../image/entity_stars.png'}}" bindtap="img_bind"></image>
</view>
<view class="cross_column" >
<button bindtap="Reasons_bind" class="but_style">需要返修</button>
<button class="but_style">确认评价</button>
</view>
</view>
</view>css样式
如果需要实现我这种效果可以使用
/* pages/browse/evaluatepage.wxss */
/* 列合并 */
.cross_column {
display: flex;
height: 70rpx;
line-height: 70rpx;
}
/* img图片样式 */
.imagecls {
width: 70rpx;
height: 70rpx;
}
/*按钮样式 */
.but_style {
background-color: #f2a8b9;
width: 200rpx;
height: 100rpx;
color: white;
}
/*报修评价内容样式 */
.content_cls {
width: 70%;
margin-left: 15%;
background-color: white;
}
.content_cls view{
margin-bottom: 50rpx;
}最后就是js
先是初始化评价都为5星
点击星星触发事件，获取item和name.根据name判断赋值
本来打算一个setData实现的，但是没整出来，有整出来的朋友可以附下代码
data: {
total: 5,//总体评价
service: 5,//服务态度
quality: 5,//施工质量
repairtime: 5//维修时间
},
img_bind: function(event) {
var id = event.currentTarget.dataset.item + 1;
var variable = event.currentTarget.dataset.name;
console.log(id)
console.log(variable)
if (variable == "total")
this.setData({
total: id,
})
else if (variable == "service")
this.setData({
service: id,
})
else if (variable == "quality")
this.setData({
quality: id,
})
else
{
this.setData({
repairtime: id,
})
}
},到此，相信大家对“怎么用微信小程序实现评价功能”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
