微信小程序评价功能实现

最新推荐文章于 2020-04-10 20:15:33 发布

北方的木

最新推荐文章于 2020-04-10 20:15:33 发布

阅读量1w

点赞数 4

分类专栏：微信小程序文章标签：微信小程序评价功能实现

本文链接：https://blog.csdn.net/q1923408717/article/details/100523984

版权

本文介绍了如何在微信小程序中实现五星评价功能。通过在wxml文件中使用for循环展示5个星星，初始设定为全选状态。利用条件判断显示空心星或实心星的图片，并设置相应的CSS样式。在JS部分，初始化评价为5星，并监听点击事件，根据点击的星星名称更新评价状态。虽然尝试用一个setData方法完成，但最终采用单独设置每个星星的状态来实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先去图标库，找一个空心星图片和一个实星图片
先是效果图
在这里插入图片描述
代码
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"></im

最低0.47元/天解锁文章