首页 > 编程 > JavaScript > 正文

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

2019-11-19 15:54:14
字体:
来源:转载
供稿:网友

微信小程序 五星评分

五星级评分效果:

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

效果如图:

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

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表