微信小程序实现购物车功能

本⽂实例为⼤家分享了微信⼩程序实现购物车功能的具体代码，供⼤家参考，具体内容如下先来弄清楚购物车的需求。

单选、全选和取消，⽽且会随着选中的商品计算出总价单个商品购买数量的增加和减少

删除商品。当购物车为空时，页⾯会变为空购物车的布局

⾸先是⼀个商品列表(carts)，列表⾥的单品需要：商品图(image)，商品名(title)，单价(price)，数量(num)，是否选中(selected)，商品id(id)

然后左下⾓的全选，需要⼀个字段(selectAllStatus)表⽰是否全选了右下⾓的总价(totalPrice)最后需要知道购物车是否为空(hasList)

知道了需要这些数据，在页⾯初始化的时候我们先定义好这些。2、下⾯是代码

1

2

3 4

5

6 7

8 9 {{item.title}}10 ￥{{item.price}}11

12 -13 {{item.num}}

14 +15

16 x 17 18

19

20 21 22

23 24

25 全选

26 ￥{{totalPrice}}27 28

29

购物车是空的哦30 3132js:12345

67101112131415161718192021222324252627282930313233343536373839404142434447484950515253555657585960616263656667

// page/component/cart/cart.jsPage({

/**

* 页⾯的初始数据 */

data: {

carts: [], //购物车列表

hasList: false, //列表是否有数据 totalPrice: 0, // 总价 初始为0

selectAllStatus: true, // 全选状态 默认全选 obj: {

name: \"hello\" } },

/**

* ⽣命周期函数--监听页⾯加载 */

onLoad: function (options) {

},

/**

* ⽣命周期函数--监听页⾯初次渲染完成 */

onReady: function () {

},

/**

* ⽣命周期函数--监听页⾯显⽰ */

onShow: function () { this.setData({

hasList: true, // 含有数据 设为true carts: [

{id: 1, title: '新鲜芹菜 半⽄', image:'/image/s5.png',num:4,price: 0.01,seclected:true}, {id: 2, title: '素⽶ 500g', image: '/image/s6.png', num: 1, price: 0.03, seclected:true} ] });

this.getTotalPrice(); },

// 当前商品选中事件 selectList(e) {

const index = e.currentTarget.dataset.index; //获取 data 传进来的index let carts = this.data.carts; // 获取购物车列表

const seclected = carts[index].seclected; //获取当前商品的选中状态 carts[index].seclected = !seclected; // 改变状态 this.setData({ carts: carts });

this.getTotalPrice(); //重新获取总价 },

// 删除购物车当前商品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({

68 hasList: false // 修改标识为false 显⽰购物车为空页⾯69 });

70 } else { // 如果不为空

71 this.getTotalPrice(); // 重新计算总价格

}72},73

74// 购物车全选事件75

76selectAll(e) {

77 let selectAllStatus = this.data.selectAllStatus; // 是否全选状态

selectAllStatus = !selectAllStatus;78 let carts = this.data.carts;79

80 for (let i = 0; i < carts.length; i++) {81 carts[i].selected = selectAllStatus;82 } // 改变所有商品状态83 this.setData({

selectAllStatus: selectAllStatus,84

carts: carts85 });

86 this.getTotalPrice(); //重新获取总价87},88

// 绑定加数量事件

addCount(e) {

90 const index = e.currentTarget.dataset.index;91 let carts = this.data.carts;92 let num = carts[index].num;93 num = num + 1;

carts[index].num = num;94 this.setData({95 carts: carts96 });

97 this.getTotalPrice();

},98

99// 绑定减数量事件100minusCount(e) {

101 const index = e.currentTarget.dataset.index;102 const obj = e.currentTarget.dataset.obj;

let carts = this.data.carts;103

let num = carts[index].num;104 if (num <= 1) {105 return false;106 }

107 num = num - 1;

108 carts[index].num = num;

this.setData({109

carts: carts110 });

111 this.getTotalPrice();112},113

114// 计算总价

getTotalPrice() {

115 let carts = this.data.carts; // 获取购物车列表116 let total = 0;

117 for (let i = 0; i < carts.length; i ++) { // 循环列表得到每个数据118 if (carts[i].selected) { // 判断选中才会计算价格

119 total += carts[i].num * carts[i].price; // 所有价格加起来120 }

}

121 this.setData({ // 最后赋值到data 中渲染到页⾯122 carts: carts,

123 totalPrice: total.toFixed(2)124 });

},125

126

/**

127 * ⽣命周期函数--监听页⾯隐藏128 */

129 onHide: function () {

130 131 },132 133 /**

* ⽣命周期函数--监听页⾯卸载134 */

135 onUnload: function () {136 137 },138 139 /**

140 * 页⾯相关事件处理函数--监听⽤户下拉动作

*/141

onPullDownRefresh: function () {142

143 },144 145 /**

146 * 页⾯上拉触底事件的处理函数147 */

148 onReachBottom: function () {149

},150

151 /**

152 * ⽤户点击右上⾓分享153 */

1 onShareAppMessage: function () {155 156 }157})1581591601611621631165166167168169为⼤家推荐现在关注度⽐较⾼的微信⼩程序教程⼀篇：⼩编为⼤家精⼼整理的，希望喜欢。以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。