WeChat Mini Programme Mall Project Shopping Quantité Addition et Soustraction

Cet article présente principalement en détail la fonction d'ajout et de soustraction de la quantité d'achats dans le centre commercial du mini-programme WeChat. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer

Lorsque nous achetons le bébé, La quantité d'achats est souvent ce que nous devons utiliser, comme indiqué ci-dessous :
Dans la page de détails du produit :

Dans le panier :

Je vais maintenant vous présenter ce petit composant Comment l'écrire dans le petit programme
L'image ci-dessous est l'image de ce projet :

wxml :

<!-- 主容器 --> 
<view class="stepper"> 
  <!-- 减号 --> 
  <text class="{{minusStatus}}" bindtap="bindMinus">-</text> 
  <!-- 数值 --> 
  <input type="number" bindchange="bindManual" value="{{num}}" /> 
  <!-- 加号 --> 
  <text class="normal" bindtap="bindPlus">+</text> 
</view>

wxss :

/*全局样式*/ 
page { 
  padding: 20px 0; 
} 
 
/*主容器*/ 
.stepper { 
  width: 80px; 
  height: 26px; 
  /*给主容器设一个边框*/ 
  border: 1px solid #ccc; 
  border-radius: 3px; 
  margin:0 auto; 
} 
 
/*加号和减号*/ 
.stepper text { 
  width: 19px; 
  line-height: 26px; 
  text-align: center; 
  float: left; 
} 
 
/*数值*/ 
.stepper input { 
  width: 40px; 
  height: 26px; 
  float: left; 
  margin: 0 auto; 
  text-align: center; 
  font-size: 12px; 
  /*给中间的input设置左右边框即可*/ 
  border-left: 1px solid #ccc; 
  border-right: 1px solid #ccc; 
} 
 
/*普通样式*/ 
.stepper .normal{ 
  color: black; 
} 
 
/*禁用样式*/ 
.stepper .disabled{ 
  color: #ccc; 
}

js :

Page({ 
  data: { 
    // input默认是1 
    num: 1, 
    // 使用data数据对象设置样式名 
    minusStatus: 'disabled' 
  }, 
  /* 点击减号 */ 
  bindMinus: function() { 
    var num = this.data.num; 
    // 如果大于1时，才可以减 
    if (num > 1) { 
      num --; 
    } 
    // 只有大于一件的时候，才能normal状态，否则disable状态 
    var minusStatus = num <= 1 ? &#39;disabled&#39; : &#39;normal&#39;; 
    // 将数值与状态写回 
    this.setData({ 
      num: num, 
      minusStatus: minusStatus 
    }); 
  }, 
  /* 点击加号 */ 
  bindPlus: function() { 
    var num = this.data.num; 
    // 不作过多考虑自增1 
    num ++; 
    // 只有大于一件的时候，才能normal状态，否则disable状态 
    var minusStatus = num < 1 ? &#39;disabled&#39; : &#39;normal&#39;; 
    // 将数值与状态写回 
    this.setData({ 
      num: num, 
      minusStatus: minusStatus 
    }); 
  }, 
  /* 输入框事件 */ 
  bindManual: function(e) { 
    var num = e.detail.value; 
    // 将数值与状态写回 
    this.setData({ 
      num: num 
    }); 
  } 
})

Résultat de l'exécution :

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Outils requis pour le développement du système de centre commercial du mini-programme WeChat

Demande de billet de train pour le mini-programme WeChat Le code pour

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!