Avis cinq étoiles dans le mini-programme WeChat-Développement de mini-programmes-php.cn

Avis cinq étoiles dans le mini-programme WeChat

高洛峰

Libérer： 2017-02-27 14:29:04

original

3800 Les gens l'ont consulté

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 :

Avis cinq étoiles dans le mini-programme WeChat

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>

Copier après la connexion

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

Copier après la connexion

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;*/
}

Copier après la connexion

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