Avis cinq étoiles dans le mini-programme WeChat

Nous avons souvent des avis sur des services ou des articles. La méthode courante est de cinq étoiles. Vous pouvez rapidement obtenir l'effet d'évaluation en touchant.


Jetons d'abord un coup d'œil aux rendus implémentés :

Comme le montre l'image ci-dessus, nous souhaitons ici ajouter trois cinq étoiles critiques. Le premier [correspondance à la description], le deuxième [vitesse de livraison] et le troisième [attitude de service].

Expliquons ici, le commentaire « description correspond »
Code WXML

<!--星星评价-->
  <view class="comment1-description" style="display:flex;flex-direction:row;">
  <view class="comment1-description1">描述相符</view>
  <view  class="star-pos" style="display:flex;flex-direction:row;">
       <view class="stars  {{flag0>=1? &#39;on&#39;: &#39;&#39;}}"  bindtap="changeColor1"></view>
       <view class="stars  {{flag0>=2? &#39;on&#39;: &#39;&#39;}}"  bindtap="changeColor2"></view>
       <view class="stars  {{flag0>=3? &#39;on&#39;: &#39;&#39;}}"  bindtap="changeColor3"></view>
       <view class="stars  {{flag0>=4? &#39;on&#39;: &#39;&#39;}}"  bindtap="changeColor4"></view>
       <view class="stars  {{flag0>=5? &#39;on&#39;: &#39;&#39;}}"  bindtap="changeColor5"></view>
   </view>
   </view>

Code JS

Page({
  data:{
      flag:0
  },
  changeColor1:function(){
        var that = this;
        that.setData( {
            flag: 1
        });
  },
  changeColor2:function(){
        var that = this;
        that.setData( {
            flag:2
        });
    },
  changeColor3:function(){
        var that = this;
        that.setData( {
            flag: 3
        });
    },
  changeColor4:function(){
        var that = this;
        that.setData( {
            flag:4

Ici, la valeur d'un indicateur de variable est passée changements pour contrôler et déterminer la valeur spécifique du score [description correspond].
Une fonction événementielle qui modifie le score est liée à chaque étoile pour définir le changement de valeur.

Code WCSS

/*星星的样式*/
.stars{
    background-image: url("http://m.dev.vd.cn/static/xcx/v1/goo/star(灰)@1.5x.png");
    width: 43rpx;
    height: 43rpx;
    background-size: 43rpx 43rpx;
    margin-left: 40rpx;
}
.on{
    background-image: url("http://m.dev.vd.cn/static/xcx/v1/goo/star@1.5x.png");
    width: 43rpx;
    height: 43rpx;
    background-size: 43rpx 43rpx;
    /*margin-left: 10px;*/
}

Pour plus d'articles liés aux avis cinq étoiles dans les mini-programmes WeChat, veuillez faire attention au site Web PHP chinois !