微信小程序五星评分的实现实例

更新时间：2017年08月04日 10:34:51 投稿：lqh

这篇文章主要介绍了微信小程序五星评分的实现实例的相关资料,这里提供实现实例帮助大家实现改功能，需要的朋友可以参考下

微信小程序五星评分

五星级评分效果:

<view>
  <view class="zan-font-16 my-ib" bindtap="myStarChoose">
    <block wx:for="{{starMap}}">
      <text wx:if="{{star>=index+1}}" style="padding-right: .5em" class="zan-c-red" data-star="{{index+1}}">★</text>
      <text wx:if="{{star<index+1}}" style="padding-right: .5em" class="zan-c-gray-dark" data-star="{{index+1}}">☆</text>
    </block>
  </view>
  <!--★-->
  <text class="zan-c-gray-dark">{{starMap[star-1]}}</text>
</view>

这里的zan-font-16,zan-c-red,zan-c-gray-dark是ZanUI-WeApp的样式。

这里的my-ib只是将设置display为inline-block。

Page({
  data: {
    star: 0,
    starMap: [
      '非常差',
      '差',
      '一般',
      '好',
      '非常好',
    ],
  },
  myStarChoose(e) {
    let star = parseInt(e.target.dataset.star) || 0;
    this.setData({
      star: star,
    });
  }
});

效果如图：

以上就是微信小程序五星评分的实例，如有疑问请留言或者到本站社区交流讨论，感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

您可能感兴趣的文章:

JavaScript设计模式之单例模式应用场景案例详解
这篇文章主要为大家介绍了JavaScript中单例模式的应用场景案例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-05-05
Google 地图API Map()构造器详解
本文主要介绍Google 地图API Map(),这里对Map()构造器的知识做了一下整理以及提供简单的代码示例,开发Google 地图应用的朋友可以参考下
2016-08-08
Google 地图叠加层实例讲解
本文主要介绍Google 地图叠加层,这里帮大家整理了Google地图叠加层一些实用代码并详细介绍了相关知识，有需要的小伙伴可以参考下
2016-08-08
JavaScript严格模式use strict的介绍
这篇文章主要介绍了JavaScript严格模式use strict，严格模式是JavaScript中的一种限制性更强的变种方式。严格模式并不是JavaScript中的子集，它在语义上与正常的代码有明显的差异，下面我们就一起来学习该内容吧,需要的朋友也可以参考一下
2021-12-12
使用Sonarqube扫描Javascript代码的示例
今天小编就为大家分享一篇关于使用Sonarqube扫描Javascript代码的示例，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
2018-12-12
fabric.js图层功能独立显隐添加删除预览实现详解
这篇文章主要为大家介绍了fabric.js图层功能独立显隐添加删除预览实现详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-05-05
微信小程序中form 表单提交和取值实例详解
这篇文章主要介绍了微信小程序中form 表单提交和取值实例详解的相关资料,需要的朋友可以参考下
2017-04-04
微信小程序 action-sheet详解及实例代码
这篇文章主要介绍了微信小程序 action-sheet详解及实例代码的相关资料,需要的朋友可以参考下
2016-11-11
前端算法leetcode109题解有序链表转换二叉搜索树
这篇文章主要为大家介绍了前端算法leetcode109题解有序链表转换二叉搜索树示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-09-09
Google 地图控件集详解及实例代码
本文主要介绍Google 地图控件集,这里帮大家整理了关于Google地图控件集的基础知识,详细介绍了控件的功能，并附示例代码，有需要的小伙伴可以参考下
2016-08-08