微信小程序如何设计评价功能，以吸引更多用户参与长尾词讨论？

本文共计807个文字，预计阅读时间需要4分钟。

原文：本文字例为大家分享了微信小程序实现评价的具体代码，供大家参考，具体内容如下：首先去图标库，找一个空心星图标和一个实心星图标，首先是效果图，然后是代码+wxml文件+for循环5次，初始值是★。

分享微信小程序评价功能代码示例，包含图标选择、效果图展示及5次循环的wxml代码。

本文实例为大家分享了微信小程序实现评价的具体代码，供大家参考，具体内容如下

首先去图标库，找一个空心星图片和一个实星图片

先是效果图

代码

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" style="margin-top: 50rpx;">       <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" style="height:120rpx;margin-top:200rpx;margin-button:10rpx">       <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,       })     }   },

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持自由互联。