当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 微信小程序 五星评分的实现实例

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

2017年12月12日  | 移动技术网IT编程  | 我要评论

微信小程序 五星评分

五星级评分效果:

<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,
    });
  }
});

效果如图：

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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网