Comment implémenter la logique de panier d'achat de commerce électronique dans le développement du mini-programme WeChat

Je voudrais partager avec vous un processus logique pour sélectionner tous les articles dans le panier du mini programme. Je dois remercier ma vieille sœur de m'avoir appris qu'un développeur doit être rigoureux dans la création des choses, peu importe comment. la conception de l'interface utilisateur est moche, vous devez suivre une certaine logique.

La première chose que nous devons faire est que lorsque l'utilisateur clique sur le troisième produit, le bouton Sélectionner tout le sélectionnera automatiquement, ou après sélectionner tout, à condition qu'il y ait Si un produit n'est pas sélectionné, le bouton Sélectionner tout doit également être modifié. Laissez-moi d'abord vous montrer le code :

Vous devez définir certaines données que vous devez restituer à chaque fois que la page est chargée

data: {
likeList: [],
carts:[], // 购物车列表
hasList:false, // 列表是否有数据
//totalPrice:0, // 总价，初始为0
selectAllStatus:false, // 全选状态，默认全选,
goodsNums:0,
allclick:[]
}
每件商品单个选中的的逻辑处理
selectList(e) {
  const index = e.currentTarget.dataset.index;// 获取每一个点击的购物车ID  let carts = this.data.carts,
  selected = carts[index].select,
  all = this.data.allclick;
  carts[index].select = !selected;
carts[index].select == true ? all.push(index):all.splice(index,1);
all.length == carts.length ?
this.setData({
  selectAllStatus: true}):this.setData({
  selectAllStatus: false});
  this.getTotalPrice();
},

• Le code ci-dessus effectue d'abord l'effet de rendu de page à sélection unique. Le code dans la partie jugement est l'étape la plus importante du traitement de la logique de sélection. Je crois que vous avez remarqué ici que j'ai défini un tableau vide de allclick dans les données, puis la logique suivante :

• Lorsque le bouton est sélectionné, prenez l'indice correspondant L'indice de l'article est placé dans le nouvel arr. Puisque ma logique de règlement précédente est terminée, je pousse simplement les données dans le tableau à volonté, mais elles peuvent en fait être traitées comme des données plus importantes correspondant au produit. Si le bouton

• est décoché, les données correspondant à l'indice de cet élément seront retrouvées dans la nouvelle arr et supprimées

• Après avoir terminé les deux étapes ci-dessus, déterminez la longueur de l'arrivée et du panier à chaque fois que l'état du bouton change.

C'est mon traitement, il peut aussi être recyclé, il existe de nombreuses façons d'y parvenir, je l'ai juste mis à titre de référence pour les amis qui n'y ont jamais été en contact~

data: {
likeList: [],
carts:[], // 购物车列表
hasList:false, // 列表是否有数据
//totalPrice:0, // 总价，初始为0
selectAllStatus:false, // 全选状态，默认全选,
goodsNums:0,
allclick:[]
}
每件商品单个选中的的逻辑处理
selectList(e) {
  const index = e.currentTarget.dataset.index;// 获取每一个点击的购物车ID  let carts = this.data.carts,
  selected = carts[index].select,
  all = this.data.allclick;
  carts[index].select = !selected;
carts[index].select == true ? all.push(index):all.splice(index,1);
all.length == carts.length ?
this.setData({
  selectAllStatus: true}):this.setData({
  selectAllStatus: false});
  this.getTotalPrice();
},

• Ce code traite également d'abord l'état entièrement sélectionné, puis traite l'état associé

• Quand Quand. all est sélectionné et décoché, tous les boutons des informations sur le produit sont remplacés par false et le tableau allclick est directement effacé.

• Lorsque tous sont sélectionnés, remplacez tous les boutons des informations sur le produit par true, effacez-les d'abord, puis appuyez-les à nouveau, puis attribuez des valeurs.

Après ces quelques étapes, toute la logique de tout sélectionner a été résolue

Je crois que vous avez lu ceci article Vous maîtrisez la méthode des cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment utiliser switchTab dans le développement d'applets WeChat

Comment écrire du code pour le développement d'un mini-programme WeChat

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!