首页 > 微信小程序 > 小程序开发 > 微信小程序之实现五星评分的示例

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

黄舟
发布: 2017-09-13 09:11:28
原创
2425 人浏览过

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

微信小程序 五星评分

五星级评分效果:


<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: [
      &#39;非常差&#39;,
      &#39;差&#39;,
      &#39;一般&#39;,
      &#39;好&#39;,
      &#39;非常好&#39;,
    ],
  },
  myStarChoose(e) {
    let star = parseInt(e.target.dataset.star) || 0;
    this.setData({
      star: star,
    });
  }
});
登录后复制

效果如图:

以上是微信小程序之实现五星评分的示例的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板