Maison >Applet WeChat >Développement de mini-programmes >Exemple de programme WeChat Mini pour obtenir une note de cinq étoiles

Exemple de programme WeChat Mini pour obtenir une note de cinq étoiles

黄舟
黄舟original
2017-09-13 09:11:282424parcourir

Cet article présente principalement des informations pertinentes sur les exemples de mise en œuvre du mini-programme WeChat cinq étoiles. Voici des exemples de mise en œuvre pour vous aider à mettre en œuvre la fonction modifiée. Les amis dans le besoin peuvent se référer au

Mini-programme WeChat cinq. -Note d'étoiles

Effet de note de cinq étoiles :


<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>

Ici zan-font-16,zan-c- red,zan-c-gray-dark est le style de ZanUI-WeApp.

Mon-ib ici définit simplement l'affichage sur le bloc en ligne.


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

L'effet est le suivant :

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn