前言
以往的購物車，基本都是通過大量的 dom 操作來實現。微信小程式其實跟 vue.js 的用法非常像，接下來就看看小程式可以怎樣實現購物車功能。
需求先來弄清楚購物車的需求。
根據設計圖，我們可以先實現靜態頁面。接下來，再看看乙個購物車需要什麼樣的資料。
知道了需要這些資料，在頁面初始化的時候我們先定義好這些。
**實現
初始化page(,
onshow() ,
]});
},})
購物車列表資料我們一般是通過請求伺服器拿到的資料，所以我們放在生命週期函式裡給 carts 賦值。想到每次進到購物車都要獲取購物車的最新狀態，而onload和onready只在初始化的時候執行一次，所以我需要把請求放在 onshow 函式裡。(這裡先拿點假資料冒充一下吧)
布局wxml
修好之前寫好的靜態頁面，繫結資料。 }
￥}-}+
全選￥}程式設計客棧ext>
計算總價
總價 = 選中的商品1的 ** * 數量 + 選中的商品2的 ** * 數量 + ...
根據公式，可以得到
gettotalprice() }" 把當前商品在列表陣列中的下標傳給事件。
selectlist(e) );
this.gettotalprice(); // 重新獲取總價
}全選事件
全選就是根據全選狀態 selectallstatus 去改變每個商品的 selected
selectall(e)
this.setdata();
this.gettotalprice(); // 重新獲取總價
}增減數量
點選+號，num加1，點選-號，如果num > 1，則減1
// 增加數量
addcount(e) );
this.gettotalprice();
},// 減少數量
minuscount(e)
num = num - 1;
carts[index].num = num;
this.setdata();
this.gettotalprice();
}刪除商品
點選刪除按鈕則從購物車列表中刪除當前元素，刪除之後如果購物車為空，改變購物車為空標識haslist為false
deletelist(e) );
if(!carts.length));
}else }總結
雖然乙個購物車功能比較簡單，但是裡面涉及到微信小程式的知識點還是比較多的，適合新手練習掌握。
完整的小程式**demo含購物車，請戳：wxapp-mall
更多文章：lin-xin/blog
本文標題: 微信小程式之購物車功能
本文位址: /ruanjian/j**a/190304.html
微信小程式之購物車功能
先來弄清楚購物車的需求。根據設計圖，我們可以先實現靜態頁面。接下來，再看看乙個購物車需要什麼樣的資料。知道了需要這些資料，在頁面初始化的時候我們先定義好這些。page onshow 購物車列表資料我們一般是通過請求伺服器拿到的資料，所以我們放在生命週期函式裡給 carts 賦值。想到每次進到購物車都...
微信小程式購物車功能
管理您的購物車 點選立即前往 全選 合計 結算 page shop mana management goto carts goods goods check checkbox goods details goods img goods img image goods title goods name...
微信小程式之購物車的功能
1.購物車裡面功能無非就是刪除商量，增加 減少 數量，單全選，商品合計 2.這段 var cartitems this.data.cartitems 獲取購物車裡面的商品，之後在通過下標e.currenttarget.dataset.index來獲取當前的商品 選擇事件 單全選 單選 select ...