小程序模板网

微信小程序五星级评分效果

发布时间:2018-04-23 11:21 所属栏目:小程序开发教程

五星级评分效果:

 

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

这里的zan-font-16,zan-c-red,zan-c-gray-dark是ZanUI-WeApp的样式。  这里的my-ib只是将设置display为inline-block。

 

				
  1. Page({
  2. data: {
  3. star: 0,
  4. starMap: [
  5. '非常差',
  6. '差',
  7. '一般',
  8. '好',
  9. '非常好',
  10. ],
  11. },
  12. myStarChoose(e) {
  13. let star = parseInt(e.target.dataset.star) || 0;
  14. this.setData({
  15. star: star,
  16. });
  17. }
  18. });

效果如图:



易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/23910.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询