はじめに

これまで、ショッピング カートは基本的に多數(shù)の DOM 操作を通じて実裝されていました。 WeChat アプレットは実際には vue.js の使用方法とよく似ています。次に、アプレットがショッピング カート機能を?qū)g裝する方法を見てみましょう。

要件

まず、ショッピング カートのニーズを把握しましょう。

• #単一選択、全選択とキャンセル、選択した商品に応じて合計金額が計算されます

• 単一の購入數(shù)量商品の増加と削減

#アイテムの削除。ショッピング カートが空の場合、ページは空のショッピング カートのレイアウトに変更されます。
設計図によると、まず靜的ページを?qū)g裝できます。次に、ショッピング カートに必要なデータの種類を見てみましょう。

最初は商品リスト(カート)で、リスト內(nèi)の項目は商品畫像(image)、商品名(title)、単価(price)、數(shù)量(num)です。 、選択されているかどうか (選択されているかどうか)、プロダクト ID (id)
を選択し、左下隅ですべてを選択します。すべてが選択されているかどうかを示すフィールド (selectAllStatus) が必要です
右下隅の合計価格 (totalPrice)
最後に、ショッピング カートが空かどうかを知る必要があります (hasList)

• #必要なものはわかっています。データ、ページが初期化されるときに最初にこれらを定義します。

コード実裝

初期化

Page({
????data:?{
????????carts:[],???????????????//?購物車列表
????????hasList:false,??????????//?列表是否有數(shù)據(jù)
????????totalPrice:0,???????????//?總價，初始為0
????????selectAllStatus:true????//?全選狀態(tài)，默認全選
????},
????onShow()?{
????????this.setData({
??????????hasList:?true,????????//?既然有數(shù)據(jù)了，那設為true吧
??????????carts:[
????????????{id:1,title:'新鮮芹菜?半斤',image:'/image/s5.png',num:4,price:0.01,selected:true},
????????????{id:2,title:'素米?500g',image:'/image/s6.png',num:1,price:0.03,selected:true}
??????????]
????????});
??????},
})

通常、ショッピングカートのリストデータはサーバーにリクエストして取得するので、ライフサイクル関數(shù)でカートに値を割り當てます。ショッピングカートに入るたびにショッピングカートの最新ステータスを取得しようと考えたのですが、onLoadとonReadyは初期化時に1回しか実行されないので、onShow関數(shù)にリクエストを入れる必要があります。 (ここでは偽データのふりをしてみます)

Layout wxml

前に書いた靜的ページを修復し、データをバインドします。

?<view class="cart-box">
????<!-- wx:for 渲染購物車列表 -->
????<view wx:for="{{carts}}">
????
????????<!-- wx:if 是否選擇顯示不同圖標 -->
????????<icon wx:if="{{item.selected}}" type="success" color="red" bindtap="selectList" data-index="{{index}}" />
????????<icon wx:else type="circle" bindtap="selectList" data-index="{{index}}"/>
????????
????????<!-- 點擊商品圖片可跳轉(zhuǎn)到商品詳情 -->
????????<navigator url="../details/details?id={{item.id}}">
????????????<image class="cart-thumb" src="{{item.image}}"></image>
????????</navigator>
????????
????????<text>{{item.title}}</text>
????????<text>￥{{item.price}}</text>
????????
????????<!-- 增加減少數(shù)量按鈕 -->
????????<view>
????????????<text bindtap="minusCount" data-index="{{index}}">-</text>
????????????<text>{{item.num}}</text>
????????????<text bindtap="addCount" data-index="{{index}}">+</text>
????????</view>
????????
????????<!-- 刪除按鈕 -->
????????<text bindtap="deleteList" data-index="{{index}}">?×?</text>
????</view>
</view>

<!-- 底部操作欄 -->
<view>
????<!-- wx:if 是否全選顯示不同圖標 -->
????<icon wx:if="{{selectAllStatus}}" type="success_circle" color="#fff" bindtap="selectAll"/>
????<icon wx:else type="circle" color="#fff" bindtap="selectAll"/>
????<text>全選</text>
????
????<!-- 總價 -->
????<text>￥{{totalPrice}}</text>
</view>

合計価格を計算します

合計価格 = 選択した製品の価格 1 * 選択した製品の価格 2 * 數(shù)量...

式によると、

getTotalPrice()?{
????let?carts?=?this.data.carts;??????????????????//?獲取購物車列表
????let?total?=?0;
????for(let?i?=?0;?i<carts.length;?i++)?{?????????//?循環(huán)列表得到每個數(shù)據(jù)
????????if(carts[i].selected)?{???????????????????//?判斷選中才會計算價格
????????????total?+=?carts[i].num?*?carts[i].price;?????//?所有價格加起來
????????}
????}
????this.setData({????????????????????????????????//?最后賦值到data中渲染到頁面
????????carts:?carts,
????????totalPrice:?total.toFixed(2)
????});
}

合計価格を変更するページ上の他の操作では、このメソッドを呼び出す必要があります。

選択イベント

クリックすると選択され、もう一度クリックすると選択が解除され、実際には選択フィールドが変更されます。 data-index="{{index}}" を渡して、リスト配列內(nèi)の現(xiàn)在の製品のインデックスをイベントに渡します。

<p>selectList(e) {<br> ? ?const index = e.currentTarget.dataset.index; ? ?// 獲取data- 傳進來的index<br> ? ?let carts = this.data.carts; ? ? ? ? ? ? ? ? ? ?// 獲取購物車列表<br> ? ?const selected = carts[index].selected; ? ? ? ? // 獲取當前商品的選中狀態(tài)<br> ? ?carts[index].selected = !selected; ? ? ? ? ? ? ?// 改變狀態(tài)<br> ? ?this.setData({<br> ? ? ? ?carts: carts<br> ? ?});<br> ? ?this.getTotalPrice(); ? ? ? ? ? ? ? ? ? ? ? ? ? // 重新獲取總價<br>}<br></p>

すべてのイベントを選択

すべて選択とは、全選択狀態(tài)に応じて各商品の選択內(nèi)容を変更する selectAllStatus

<p>selectAll(e) {<br> ? ?let selectAllStatus = this.data.selectAllStatus; ? ?// 是否全選狀態(tài)<br> ? ?selectAllStatus = !selectAllStatus;<br> ? ?let carts = this.data.carts;<br><br> ? ?for (let i = 0; i < carts.length; i++) {<br> ? ? ? ?carts[i].selected = selectAllStatus; ? ? ? ? ? ?// 改變所有商品狀態(tài)<br> ? ?}<br> ? ?this.setData({<br> ? ? ? ?selectAllStatus: selectAllStatus,<br> ? ? ? ?carts: carts<br> ? ?});<br> ? ?this.getTotalPrice(); ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? // 重新獲取總價<br>}<br></p>

數(shù)量を増減する

數(shù)字をクリックし、num に 1 を加え、- 記號をクリックします。num > 1 の場合、1 を減算します

<p>// 增加數(shù)量<br>addCount(e) {<br> ? ?const index = e.currentTarget.dataset.index;<br> ? ?let carts = this.data.carts;<br> ? ?let num = carts[index].num;<br> ? ?num = num + 1;<br> ? ?carts[index].num = num;<br> ? ?this.setData({<br> ? ? ?carts: carts<br> ? ?});<br> ? ?this.getTotalPrice();<br>},<br>// 減少數(shù)量<br>minusCount(e) {<br> ? ?const index = e.currentTarget.dataset.index;<br> ? ?let carts = this.data.carts;<br> ? ?let num = carts[index].num;<br> ? ?if(num <= 1){<br> ? ? ?return false;<br> ? ?}<br> ? ?num = num - 1;<br> ? ?carts[index].num = num;<br> ? ?this.setData({<br> ? ? ?carts: carts<br> ? ?});<br> ? ?this.getTotalPrice();<br>}<br></p>

商品を削除

削除ボタンをクリックして、ショッピングから現(xiàn)在の要素を削除します削除後、ショッピング カートが空の場合は、ショッピング カート空フラグ hasList を false に変更します

deleteList(e)?{
????const?index?=?e.currentTarget.dataset.index;
????let?carts?=?this.data.carts;
????carts.splice(index,1);??????????????//?刪除購物車列表里這個商品
????this.setData({
????????carts:?carts
????});
????if(!carts.length){??????????????????//?如果購物車為空
????????this.setData({
????????????hasList:?false??????????????//?修改標識為false，顯示購物車為空頁面
????????});
????}else{??????????????????????????????//?如果不為空
????????this.getTotalPrice();???????????//?重新計算總價格
????}???
}

要約

ショッピング カート機能は比較的単純ですが、まだ多くの知識が必要です。 WeChat アプレットに関連するポイント。これは初心者がマスターするのに適した練習です。

推奨チュートリアル: 「

WeChat ミニ プログラム

」

以上がWeChatミニプログラムにショッピングカート機能を?qū)g裝の詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。