WeChat ミニプログラム開発で電子商取引ショッピング カート ロジックを実装する方法

ミニ プログラムのショッピング カート内のすべてのアイテムを選択するためのロジック プロセスを共有したいと思います。UI デザインがどんなに醜くても、開発者は厳密に物事を作成する必要があることを教えてくれた姉に感謝しなければなりません。 、必要なロジックが必要です。

最初に行う必要があるのは、ユーザーが 3 番目の商品をクリックすると、「すべて選択」ボタンが自動的に選択されるか、すべてを選択した後、1 つの商品が選択されていない限り、「すべて選択」ボタンが選択されることです。ボタンも変更する必要があります。最初にコードを示します:

ページが onload になるたびにレンダリングする必要があるデータを定義する必要があります

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

• 上記のコード、最初に行うことは単一選択ページのレンダリング効果。判定部分のコードは、選択ロジックを処理する上で最も重要なステップです。ここで、データ内に allclick の空の配列を定義してから、次のロジックを定義したことに気づいたと思います。ボタンが選択されたら、対応する項目のコーナー マークを取り出し、それを新しい配列に置きます。以前に決済ロジックが完成していたので、何気なく配列にデータをプッシュしただけですが、実は商品に応じたより重要なデータとして処理することができます。

• ボタンが選択されていない場合、この項目の添え字に対応するデータは新しいarrで検索され、削除されます

• 上記の2つの手順を完了すると、arrの長さとカートが表示されますボタンのステータスが変化するたびに決定されます。

• これは私の加工です、リサイクルすることもできます、それを実現する方法はたくさんあります、一度も連絡を取ったことがない友達のために参考のために載せただけです~

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

• このコードは、最初に選択された状態を処理し、次に関連付けられた状態を処理します。

• すべてが選択されてチェックが外されている場合、製品情報のすべてのボタンを false に変更し、allclick 配列を直接クリアします。

• すべてが選択されたら、製品情報のすべてのボタンを true に変更し、最初にボタンをクリアしてからもう一度押して、値を割り当てます。

これらのいくつかのステップを経て、すべてを選択するロジックはすべて解決されました

この記事のケースを読んだ後は、この方法を習得したと思います。さらに興味深い情報については、他の関連情報に注目してください。 PHP 中国語 Web サイトの記事をご覧ください。

推奨読書:

WeChatミニプログラム開発にswitchTabを使用する方法

WeChatミニプログラム開発用のコードの書き方

以上がWeChat ミニプログラム開発で電子商取引ショッピング カート ロジックを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。