So implementieren Sie die E-Commerce-Warenkorblogik in der WeChat-Miniprogrammentwicklung

Ich möchte Ihnen einen logischen Prozess für die Auswahl aller Artikel im Warenkorb des Miniprogramms vorstellen. Ich muss meiner alten Schwester dafür danken, dass sie mir beigebracht hat, dass ein Entwickler bei der Herstellung streng sein muss Hässlich das UI-Design ist, muss man einer Logik folgen.

Das erste, was wir tun müssen, ist, wenn der Benutzer auf das dritte Produkt klickt, wird es automatisch über die Schaltfläche „Alles auswählen“ ausgewählt, oder danach Alles auswählen, sofern kein Produkt ausgewählt ist, muss auch die Schaltfläche „Alles auswählen“ geändert werden. Lassen Sie mich Ihnen zuerst den Code zeigen:

Sie müssen einige Daten definieren, die Sie jedes Mal rendern müssen, wenn die Seite geladen wird

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

• Der obige Code führt zunächst den Einzelauswahl-Seitenrendering-Effekt aus. Der Code im Beurteilungsteil ist der wichtigste Schritt bei der Verarbeitung der Auswahllogik. Ich glaube, Sie haben hier bemerkt, dass ich in den Daten ein leeres Allclick-Array und dann die folgende Logik definiert habe:

• Wenn die Schaltfläche ausgewählt ist, nehmen Sie aus dem entsprechenden Der Index des Artikels wird in das neue Ar eingefügt. Da meine bisherige Abrechnungslogik abgeschlossen ist, schiebe ich die Daten einfach nach Belieben in das Array, sie können jedoch tatsächlich als wichtigere Daten entsprechend dem Produkt verarbeitet werden. Wenn die Schaltfläche

• deaktiviert ist, werden die dem Index dieses Elements entsprechenden Daten im neuen Arrang gefunden und entfernt

• Bestimmen Sie nach Abschluss der beiden oben genannten Schritte die Länge von arr und die Länge von cart jedes Mal, wenn sich der Schaltflächenstatus ändert.

Dies ist meine Verarbeitung, es kann auch recycelt werden, es gibt viele Möglichkeiten, dies zu erreichen, ich habe es nur als Referenz für Freunde bereitgestellt, die noch nie dort waren in Kontakt~

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

• Dieser Code verarbeitet auch zuerst den gesamten ausgewählten Status und dann den zugehörigen Status

• Wann Wann Alles ist ausgewählt und deaktiviert, alle Schaltflächen in den Produktinformationen werden auf „false“ geändert und das Allclick-Array wird direkt gelöscht.

• Wenn alle ausgewählt sind, ändern Sie alle Schaltflächen in den Produktinformationen auf „True“, löschen Sie sie zuerst, drücken Sie sie dann erneut und weisen Sie dann Werte zu.

Nach diesen wenigen Schritten ist die Logik, alles auszuwählen, gelöst

Ich glaube, Sie haben das gelesen Artikel Sie beherrschen die Fallmethode. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So verwenden Sie switchTab in der WeChat-Applet-Entwicklung

So schreiben Sie Code für die WeChat-Miniprogrammentwicklung

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die E-Commerce-Warenkorblogik in der WeChat-Miniprogrammentwicklung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!