ミニ プログラムのショッピング カート內(nèi)のすべてのアイテムを選択するためのロジック プロセスを共有したいと思います。UI デザインがどんなに醜くても、開発者は厳密に物事を作成する必要があることを教えてくれた姉に感謝しなければなりません。 、必要なロジックが必要です。
最初に行う必要があるのは、ユーザーが 3 番目の商品をクリックすると、「すべて選択」ボタンが自動(dòng)的に選択されるか、すべてを選択した後、1 つの商品が選択されていない限り、「すべて選択」ボタンが選択されることです。ボタンも変更する必要があります。最初にコードを示します:
ページが onload になるたびにレンダリングする必要があるデータを定義する必要があります
data:?{
likeList:?[],
carts:[],?//?購物車列表
hasList:false,?//?列表是否有數(shù)據(jù)
//totalPrice:0,?//?總價(jià)，初始為0
selectAllStatus:false,?//?全選狀態(tài)，默認(rèn)全選,
goodsNums:0,
allclick:[]
}
每件商品單個(gè)選中的的邏輯處理
selectList(e)?{
??const?index?=?e.currentTarget.dataset.index;//?獲取每一個(gè)點(diǎn)擊的購物車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();
},上記のコード、最初に行うことは単一選択ページのレンダリング効果。判定部分のコードは、選択ロジックを処理する上で最も重要なステップです。ここで、データ?jī)?nèi)に allclick の空の配列を定義してから、次のロジックを定義したことに気づいたと思います。ボタンが選択されたら、対応する項(xiàng)目のコーナー マークを取り出し、それを新しい配列に置きます。以前に決済ロジックが完成していたので、何気なく配列にデータをプッシュしただけですが、実は商品に応じたより重要なデータとして処理することができます。
ボタンが選択されていない場(chǎng)合、この項(xiàng)目の添え字に対応するデータは新しいarrで検索され、削除されます
上記の2つの手順を完了すると、arrの長(zhǎng)さとカートが表示されますボタンのステータスが変化するたびに決定されます。
これは私の加工です、リサイクルすることもできます、それを?qū)g現(xiàn)する方法はたくさんあります、一度も連絡(luò)を取ったことがない友達(dá)のために參考のために載せただけです~
data:?{
likeList:?[],
carts:[],?//?購物車列表
hasList:false,?//?列表是否有數(shù)據(jù)
//totalPrice:0,?//?總價(jià)，初始為0
selectAllStatus:false,?//?全選狀態(tài)，默認(rèn)全選,
goodsNums:0,
allclick:[]
}
每件商品單個(gè)選中的的邏輯處理
selectList(e)?{
??const?index?=?e.currentTarget.dataset.index;//?獲取每一個(gè)點(diǎn)擊的購物車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();
},
このコードは、最初に選択された狀態(tài)を処理し、次に関連付けられた狀態(tài)を処理します。
すべてが選択されてチェックが外されている場(chǎng)合、製品情報(bào)のすべてのボタンを false に変更し、allclick 配列を直接クリアします。
すべてが選択されたら、製品情報(bào)のすべてのボタンを true に変更し、最初にボタンをクリアしてからもう一度押して、値を割り當(dāng)てます。
これらのいくつかのステップを経て、すべてを選択するロジックはすべて解決されました
この記事のケースを読んだ後は、この方法を習(xí)得したと思います。さらに興味深い情報(bào)については、他の関連情報(bào)に注目してください。 PHP 中國(guó)語 Web サイトの記事をご覧ください。
推奨読書:
WeChatミニプログラム開発にswitchTabを使用する方法
以上がWeChat ミニプログラム開発で電子商取引ショッピング カート ロジックを?qū)g裝する方法の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語 Web サイトの他の関連記事を參照してください。
ホットAIツール
Undress AI Tool
脫衣畫像を無料で
Undresser.AI Undress
リアルなヌード寫真を作成する AI 搭載アプリ
AI Clothes Remover
寫真から衣服を削除するオンライン AI ツール。
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡(jiǎn)単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中國(guó)語版
中國(guó)語版、とても使いやすい
ゼンドスタジオ 13.0.1
強(qiáng)力な PHP 統(tǒng)合開発環(huán)境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
Xianyu WeChat ミニプログラムが正式に開始
Feb 10, 2024 pm 10:39 PM
Xianyu の公式 WeChat ミニ プログラムが靜かに開始されました。ミニ プログラムでは、プライベート メッセージを投稿して購入者/販売者とコミュニケーションしたり、個(gè)人情報(bào)や注文を表示したり、商品を検索したりすることができます。プログラム、見てみましょう。 Xianyu WeChat アプレットの名前は何ですか? 回答: Xianyu、アイドル取引、中古品販売、評(píng)価、リサイクル。 1. ミニ プログラムでは、アイドル メッセージの投稿、プライベート メッセージを介した購入者/販売者とのコミュニケーション、個(gè)人情報(bào)と注文の表示、指定された商品の検索などができます。 2. ミニ プログラム ページには、ホームページ、近くに、アイドル投稿、メッセージ投稿、私の投稿 5つの機(jī)能; 3. 使用したい場(chǎng)合は、購入する前に WeChat 支払いを有効にする必要があります。
WeChat ミニ プログラムに畫像フィルター効果を?qū)g裝する
Nov 21, 2023 pm 06:22 PM
WeChat ミニ プログラムでの畫像フィルター効果の実裝 ソーシャル メディア アプリケーションの人気に伴い、人々は寫真にフィルター効果を適用して、寫真の蕓術(shù)的効果や魅力を高めることがますます好まれています。畫像フィルター効果は WeChat ミニ プログラムにも実裝でき、より興味深く創(chuàng)造的な寫真編集機(jī)能をユーザーに提供します。この記事では、WeChat ミニ プログラムに畫像フィルター効果を?qū)g裝する方法を紹介し、具體的なコード例を示します。まず、WeChat アプレットのキャンバス コンポーネントを使用して畫像を読み込み、編集する必要があります。 Canvasコンポーネントはページ上で使用できます
WeChat アプレットにドロップダウン メニュー効果を?qū)g裝する
Nov 21, 2023 pm 03:03 PM
WeChat ミニ プログラムでドロップダウン メニュー効果を?qū)g裝するには、特定のコード サンプルが必要です。モバイル インターネットの普及に伴い、WeChat ミニ プログラムはインターネット開発の重要な部分となり、ますます多くの人が注目し始めています。 WeChat ミニ プログラムを使用します。 WeChat ミニ プログラムの開発は、従來の APP 開発よりも簡(jiǎn)単かつ迅速ですが、特定の開発スキルを習(xí)得する必要もあります。 WeChat ミニ プログラムの開発では、ドロップダウン メニューが一般的な UI コンポーネントであり、より良いユーザー エクスペリエンスを?qū)g現(xiàn)します。この記事では、WeChat アプレットにドロップダウン メニュー効果を?qū)g裝し、実用的な機(jī)能を提供する方法を詳しく紹介します。
Xianyu WeChat アプレットの名前は何ですか?
Feb 27, 2024 pm 01:11 PM
Xianyu の公式 WeChat ミニ プログラムが靜かに開始され、アイドルアイテムを簡(jiǎn)単に公開および交換できる便利なプラットフォームをユーザーに提供します。ミニ プログラムでは、プライベート メッセージを介して購入者または販売者とコミュニケーションしたり、個(gè)人情報(bào)や注文を表示したり、欲しい商品を検索したりできます。では、WeChat ミニ プログラムでは Xianyu とはいったい何と呼ばれているのでしょうか? このチュートリアル ガイドで詳しくご紹介しますので、知りたいユーザーは、この記事に従って読み続けてください。 Xianyu WeChat アプレットの名前は何ですか? 回答: Xianyu、アイドル取引、中古品販売、評(píng)価、リサイクル。 1. ミニ プログラムでは、アイドル メッセージの投稿、プライベート メッセージを介した購入者/販売者とのコミュニケーション、個(gè)人情報(bào)と注文の表示、指定された商品の検索などができます。 2. ミニ プログラム ページには、ホームページ、近くに、アイドル投稿、メッセージ投稿、マイ投稿の5つの機(jī)能、3．
WeChatアプレットは畫像アップロード機(jī)能を?qū)g裝
Nov 21, 2023 am 09:08 AM
WeChat アプレットが畫像アップロード機(jī)能を?qū)g裝 モバイル インターネットの発展に伴い、WeChat アプレットは人々の生活に欠かせないものになりました。 WeChat ミニ プログラムは、豊富なアプリケーション シナリオを提供するだけでなく、畫像アップロード機(jī)能などの開発者定義の機(jī)能もサポートします。この記事では、WeChat アプレットに畫像アップロード機(jī)能を?qū)g裝する方法と具體的なコード例を紹介します。 1. 準(zhǔn)備作業(yè) コードを書き始める前に、WeChat 開発者ツールをダウンロードしてインストールし、WeChat 開発者として登録する必要があります。同時(shí)に、WeChat についても理解する必要があります。
WeChat アプレットを使用してカルーセル切り替え効果を?qū)g現(xiàn)する
Nov 21, 2023 pm 05:59 PM
WeChat アプレットを使用してカルーセル スイッチング効果を?qū)g現(xiàn)する WeChat アプレットは、シンプルで効率的な開発と使用特性を備えた軽量のアプリケーションです。 WeChat ミニ プログラムでは、カルーセル スイッチング効果を?qū)g現(xiàn)することが一般的な要件です。この記事では、WeChat アプレットを使用してカルーセル切り替え効果を?qū)g現(xiàn)する方法と、具體的なコード例を紹介します。まず、カルーセル コンポーネントを WeChat アプレットのページ ファイルに追加します。たとえば、<swiper> タグを使用すると、カルーセルの切り替え効果を?qū)g現(xiàn)できます。このコンポーネントでは、 b を渡すことができます。
WeChat アプレットに畫像回転効果を?qū)g裝する
Nov 21, 2023 am 08:26 AM
WeChat ミニ プログラムで畫像回転効果を?qū)g裝するには、特定のコード サンプルが必要です。WeChat ミニ プログラムは、ユーザーに豊富な機(jī)能と優(yōu)れたユーザー エクスペリエンスを提供する軽量のアプリケーションです。ミニ プログラムでは、開発者はさまざまなコンポーネントと API を使用して、さまざまな効果を?qū)g現(xiàn)できます。その中で、畫像回転効果は、ミニプログラムに興味と視覚効果を加えることができる一般的なアニメーション効果です。 WeChat ミニ プログラムで畫像の回転効果を?qū)g現(xiàn)するには、ミニ プログラムが提供するアニメーション API を使用する必要があります。以下は、その方法を示す具體的なコード例です。
WeChatミニプログラムにスライディング削除機(jī)能を?qū)g裝する
Nov 21, 2023 pm 06:22 PM
WeChat ミニ プログラムにスライディング削除機(jī)能を?qū)g裝するには、特定のコード サンプルが必要です。WeChat ミニ プログラムの人気に伴い、開発者は開発プロセス中にいくつかの一般的な機(jī)能を?qū)g裝する際に問題に遭遇することがよくあります。中でも、スライド削除機(jī)能は、よく使われる一般的な機(jī)能要件です。この記事では、WeChat アプレットにスライディング削除機(jī)能を?qū)g裝する方法と具體的なコード例を詳しく紹介します。 1. 要件分析 WeChat ミニ プログラムでは、スライド削除機(jī)能の実裝には次の點(diǎn)が含まれます。 リスト表示: スライドして削除できるリストを表示するには、各リスト項(xiàng)目に次の要素が含まれている必要があります。
