本文转自：http://blog.csdn.net/michael_ouyang/article/details/70755892

续上一篇的文章：微信小程序之商品属性分类  —— 微信小程序实战商城系列（4）

自从认识某人后，我收获了两个成功。登录成功、付款成功，而且还拥有了自己的一辆车：

购物车

也发现了自己的不足之处：

余额不足。

为大家介绍的就是购物车

这里演示从商品列表中添加到购物车

下面先做商品列表页。如下图：

布局分析：

首先一个list的主盒子，接着是item盒子，这是必须的。       然后把item分成左侧的图片部分，和右侧的说明部分（item盒子使用横向弹性盒）             右侧的说明部分又分上下2部分（右侧说明部分盒子使用纵向弹性盒）                   下面价钱购物车部分（下面价钱购物车部分也使用横向弹性盒，中间使用justify-content: space-between;填充空白）

index.wxml：

[html] view plain copy print?
  1. <!--主盒子-->
  2. <view class="container">
  3. <!--head-->
  4. <view class="tit">
  5. <view class="title_val">商品列表</view>
  6. <view class="more">更多</view>
  7. </view>
  8. <!--list-->
  9. <view class="goodslist">
  10. <!--item-->
  11. <block wx:for="{{goodslist}}">
  12. <view class="goods">
  13. <!--左侧图片盒子-->
  14. <view>
  15. <image src="{{item.imgUrl}}" class="good-img" />
  16. </view>
  17. <!--右侧说明部分-->
  18. <view class="good-cont">
  19. <!--上--文字说明-->
  20. <view class="goods-navigator">
  21. <text class="good-name">{{item.name}}</text>
  22. </view>
  23. <!--下--价格部分-->
  24. <view class="good-price">
  25. <text>￥{{item.price}}</text>
  26. <image id="{{item.id}}" class="cart" src="/images/new_73.jpg" bindtap="addcart" />
  27. </view>
  28. </view>
  29. </view>
  30. </block>
  31. </view>
  32. </view>
<!--主盒子-->
<view class="container"><!--head--><view class="tit"><view class="title_val">商品列表</view><view class="more">更多</view></view><!--list--><view class="goodslist"><!--item--><block wx:for="{{goodslist}}"><view class="goods"><!--左侧图片盒子--><view><image src="{{item.imgUrl}}" class="good-img" /></view><!--右侧说明部分--><view class="good-cont"><!--上--文字说明--><view class="goods-navigator"><text class="good-name">{{item.name}}</text></view><!--下--价格部分--><view class="good-price"><text>￥{{item.price}}</text><image id="{{item.id}}" class="cart" src="/images/new_73.jpg" bindtap="addcart" /></view></view></view></block></view>
</view>

index.wxss：

[css] view plain copy print?
  1. /**index.wxss**/
  2. page{
  3. height: 100%;
  4. }
  5. .container{
  6. background: #f5f5f5;
  7. }
  8. .tit{
  9. display: flex;
  10. flex-direction: row;
  11. justify-content: space-between;
  12. height: 30px;
  13. position: relative;
  14. }
  15. .tit::before{
  16. content:'';
  17. background: #ffcc00;
  18. width:5px;
  19. height: 100%;
  20. position: absolute;
  21. left: 0;
  22. top: 0;
  23. }
  24. .title_val{
  25. padding: 0 15px;
  26. font-size: 14px;
  27. color: #555;
  28. line-height: 30px;
  29. }
  30. .more{
  31. font-size: 12px;
  32. line-height: 30px;
  33. color: #999;
  34. padding: 0 5px 0 0 ;
  35. }
  36. .goodslist{
  37. background: #fff;
  38. display: flex;
  39. flex-direction: column;
  40. }
  41. .goods{
  42. display: flex;
  43. flex-direction: row;
  44. border-bottom: 1px solid #ddd;
  45. }
  46. .good-img{
  47. padding: 5px;
  48. width: 80px;
  49. height: 80px;
  50. }
  51. .good-cont{
  52. display: flex;
  53. flex: 1;
  54. flex-direction: column;
  55. font-size: 14px;
  56. }
  57. .goods-navigator{
  58. display: flex;
  59. flex: 1;
  60. flex-direction: column;
  61. justify-content: center;
  62. }
  63. .good-name{
  64. display: flex;
  65. flex: 1;
  66. flex-direction: column;
  67. color: #555;
  68. justify-content: center;
  69. }
  70. .good-price{
  71. display: flex;
  72. flex: 1;
  73. flex-direction: row;
  74. justify-content: space-between;
  75. color:#e4393c;
  76. font-weight: 600;
  77. }
  78. .cart{
  79. width: 40px;
  80. height: 40px;
  81. padding-right: 10px;
  82. }
/**index.wxss**/
page{height: 100%;
}
.container{background: #f5f5f5;
}.tit{display: flex;flex-direction: row;justify-content: space-between;height: 30px;position: relative;
}
.tit::before{content:'';background: #ffcc00;width:5px;height: 100%;position: absolute;left: 0;top: 0;
}.title_val{padding: 0 15px;font-size: 14px;color: #555;line-height: 30px;
}
.more{font-size: 12px;line-height: 30px;color: #999;padding: 0 5px 0 0 ;
}
.goodslist{background: #fff;display: flex;flex-direction: column;
}
.goods{display: flex;flex-direction: row;border-bottom: 1px solid #ddd;
}
.good-img{padding: 5px;width: 80px;height: 80px;
}
.good-cont{display: flex;flex: 1;flex-direction: column;font-size: 14px;
}
.goods-navigator{display: flex;flex: 1;flex-direction: column;justify-content: center;
}
.good-name{display: flex;flex: 1;flex-direction: column;color: #555;justify-content: center;
}
.good-price{display: flex;flex: 1;flex-direction: row;justify-content: space-between;color:#e4393c;font-weight: 600;
}
.cart{width: 40px;height: 40px;padding-right: 10px;
}

index.js：

数据部分，一般情况都是访问接口获取数据的，这里并没有使用网络访问，为了简化demo，直接把一组数据放在data对象中。同学们可以根据其数据结构自己编写后台接口

[javascript] view plain copy print?
  1. Page({
  2. data: {
  3. goodslist: [
  4. {
  5. id:"001",
  6. imgUrl:"http://img5.imgtn.bdimg.com/it/u=2906541843,1492984080&fm=23&gp=0.jpg",
  7. name:"女装T恤中长款大码摆裙春夏新款",
  8. price:"65.00"
  9. },
  10. {
  11. id:"002",
  12. imgUrl:"http://img4.imgtn.bdimg.com/it/u=1004404590,1607956492&fm=23&gp=0.jpg",
  13. name:"火亮春秋季 男青年修身款圆领男士T恤",
  14. price:"68.00"
  15. },
  16. {
  17. id:"003",
  18. imgUrl:"http://img1.imgtn.bdimg.com/it/u=2305064940,3470659889&fm=23&gp=0.jpg",
  19. name:"新款立体挂脖t恤女短袖大码宽松条纹V领上衣显瘦休闲春夏",
  20. price:"86.00"
  21. },
  22. {
  23. id:"004",
  24. imgUrl:"http://img4.imgtn.bdimg.com/it/u=3986819380,1610061022&fm=23&gp=0.jpg",
  25. name:"男运动上衣春季上新品 上衣流行装青年",
  26. price:"119.00"
  27. },
  28. {
  29. id:"005",
  30. imgUrl:"http://img1.imgtn.bdimg.com/it/u=3583238552,3525141111&fm=23&gp=0.jpg",
  31. name:"时尚字母三角露胸t恤女装亮丝大码宽松不规则春夏潮",
  32. price:"69.00"
  33. },
  34. {
  35. id:"006",
  36. imgUrl:"http://img2.imgtn.bdimg.com/it/u=1167272381,3361826143&fm=23&gp=0.jpg",
  37. name:"新款立体挂脖t恤短袖大码宽松条纹V领上衣显瘦休闲春夏",
  38. price:"86.00"
  39. },
  40. {
  41. id:"007",
  42. imgUrl:"http://img0.imgtn.bdimg.com/it/u=789486313,2033571593&fm=23&gp=0.jpg",
  43. name:"时尚字母三角露胸t恤女装亮丝大码宽松不规则春夏潮",
  44. price:"119.00"
  45. },
  46. {
  47. id:"008",
  48. imgUrl:"http://img2.imgtn.bdimg.com/it/u=3314044863,3966877419&fm=23&gp=0.jpg",
  49. name:"男运动上衣春季上新品 上衣流行装青年",
  50. price:"69.00"
  51. },
  52. ]
  53. },
  54. // 加入购物车
  55. addcart:function(e){
  56. this.setData({
  57. toastHidden:false
  58. });
  59. // 遍历列表 与 购物车列表
  60. for (var i in this.data.goodslist){
  61. // 列表中某一项item的id == 点击事件传递过来的id。则是被点击的项
  62. if(this.data.goodslist[i].id == e.target.id){
  63. // 给goodsList数组的当前项添加count元素，值为1，用于记录添加到购物车的数量
  64. this.data.goodslist[i].count = 1;
  65. // 获取购物车的缓存数组（没有数据，则赋予一个空数组）
  66. var arr = wx.getStorageSync('cart') || [];
  67. // 如果购物车有数据
  68. if(arr.length>0){
  69. // 遍历购物车数组
  70. for(var j in arr){
  71. // 判断购物车内的item的id，和事件传递过来的id，是否相等
  72. if(arr[j].id == e.target.id){
  73. // 相等的话，给count+1（即再次添加入购物车，数量+1）
  74. arr[j].count = arr[j].count + 1;
  75. // 最后，把购物车数据，存放入缓存（此处不用再给购物车数组push元素进去，因为这个是购物车有的，直接更新当前数组即可）
  76. try {
  77. wx.setStorageSync('cart', arr)
  78. } catch (e) {
  79. console.log(e)
  80. }
  81. // 返回（在if内使用return，跳出循环节约运算，节约性能）
  82. return;
  83. }
  84. }
  85. // 遍历完购物车后，没有对应的item项，把goodslist的当前项放入购物车数组
  86. arr.push(this.data.goodslist[i]);
  87. }
  88. // 购物车没有数据，把item项push放入当前数据（第一次存放时）
  89. else{
  90. arr.push(this.data.goodslist[i]);
  91. }
  92. // 最后，把购物车数据，存放入缓存
  93. try {
  94. wx.setStorageSync('cart', arr)
  95. // 返回（在if内使用return，跳出循环节约运算，节约性能）
  96. return;
  97. } catch (e) {
  98. console.log(e)
  99. }
  100. }
  101. }
  102. }
  103. })
Page({data: {goodslist: [{id:"001",imgUrl:"http://img5.imgtn.bdimg.com/it/u=2906541843,1492984080&fm=23&gp=0.jpg",name:"女装T恤中长款大码摆裙春夏新款",price:"65.00"},{id:"002",imgUrl:"http://img4.imgtn.bdimg.com/it/u=1004404590,1607956492&fm=23&gp=0.jpg",name:"火亮春秋季 男青年修身款圆领男士T恤",price:"68.00"},{id:"003",imgUrl:"http://img1.imgtn.bdimg.com/it/u=2305064940,3470659889&fm=23&gp=0.jpg",name:"新款立体挂脖t恤女短袖大码宽松条纹V领上衣显瘦休闲春夏",price:"86.00"},{id:"004",imgUrl:"http://img4.imgtn.bdimg.com/it/u=3986819380,1610061022&fm=23&gp=0.jpg",name:"男运动上衣春季上新品 上衣流行装青年",price:"119.00"},{id:"005",imgUrl:"http://img1.imgtn.bdimg.com/it/u=3583238552,3525141111&fm=23&gp=0.jpg",name:"时尚字母三角露胸t恤女装亮丝大码宽松不规则春夏潮",price:"69.00"},{id:"006",imgUrl:"http://img2.imgtn.bdimg.com/it/u=1167272381,3361826143&fm=23&gp=0.jpg",name:"新款立体挂脖t恤短袖大码宽松条纹V领上衣显瘦休闲春夏",price:"86.00"},{id:"007",imgUrl:"http://img0.imgtn.bdimg.com/it/u=789486313,2033571593&fm=23&gp=0.jpg",name:"时尚字母三角露胸t恤女装亮丝大码宽松不规则春夏潮",price:"119.00"},{id:"008",imgUrl:"http://img2.imgtn.bdimg.com/it/u=3314044863,3966877419&fm=23&gp=0.jpg",name:"男运动上衣春季上新品 上衣流行装青年",price:"69.00"},]},// 加入购物车addcart:function(e){this.setData({toastHidden:false});// 遍历列表 与 购物车列表for (var i in this.data.goodslist){// 列表中某一项item的id == 点击事件传递过来的id。则是被点击的项if(this.data.goodslist[i].id == e.target.id){// 给goodsList数组的当前项添加count元素，值为1，用于记录添加到购物车的数量this.data.goodslist[i].count = 1;// 获取购物车的缓存数组（没有数据，则赋予一个空数组）var arr = wx.getStorageSync('cart') || [];// 如果购物车有数据if(arr.length>0){// 遍历购物车数组for(var j in arr){// 判断购物车内的item的id，和事件传递过来的id，是否相等if(arr[j].id == e.target.id){// 相等的话，给count+1（即再次添加入购物车，数量+1）arr[j].count = arr[j].count + 1;// 最后，把购物车数据，存放入缓存（此处不用再给购物车数组push元素进去，因为这个是购物车有的，直接更新当前数组即可）try {wx.setStorageSync('cart', arr)} catch (e) {console.log(e)}// 返回（在if内使用return，跳出循环节约运算，节约性能）return;}}// 遍历完购物车后，没有对应的item项，把goodslist的当前项放入购物车数组arr.push(this.data.goodslist[i]);}// 购物车没有数据，把item项push放入当前数据（第一次存放时）else{arr.push(this.data.goodslist[i]);}// 最后，把购物车数据，存放入缓存try {wx.setStorageSync('cart', arr)// 返回（在if内使用return，跳出循环节约运算，节约性能）return;} catch (e) {console.log(e)}}}}
})

编写购物车部分，如下图所示：

布局分析：

首先一个list的主盒子，接着是item盒子，这是必须的。

然后把item分成左侧的图片部分，和右侧的说明部分（item盒子使用横向弹性盒）

右侧的说明部分又分上下2部分（右侧说明部分盒子使用纵向弹性盒）

下面价钱、购物加减、购物车部分（使用纵向弹性盒）

最下面的购物加减、购物车部分（使用横向弹性盒，中间使用justify-content: space-between;填充空白）

cart.wxml：

[html] view plain copy print?
  1. <!--要是够车内没有数据，就行显示没有数据-->
  2. <view class="cart" hidden="{{iscart}}">
  3. <image src="/images/cart.png"/>
  4. <view>购物车什么都没有，赶快去购物吧</view>
  5. </view>
  6. <!--要是有数据，就显示数据-->
  7. <view class="cartList" hidden="{{!iscart}}">
  8. <!--header-->
  9. <view class="baoyou"></view>
  10. <!--list item-->
  11. <block wx:for="{{cart}}">
  12. <view class="goods">
  13. <!--左侧图片-->
  14. <view>
  15. <image src="{{item.imgUrl}}" class="good-img"/>
  16. </view>
  17. <!--右侧说明部分-->
  18. <view class="good-cont">
  19. <!--文字说明-->
  20. <view class="goods-navigator">
  21. <text class="good-name">{{item.name}}</text>
  22. </view>
  23. <!--价钱和购物加减的父盒子-->
  24. <view class="good-price">
  25. <text class="price">￥{{item.price}}</text>
  26. <view class="btn-box">
  27. <view class="btn">
  28. <button id="del{{index}}" type="default" size="mini" bindtap="delCount">-</button>
  29. <input  value="{{item.count}}"/>
  30. <button id="add{{index}}" type="default" size="mini" bindtap="addCount">+</button>
  31. </view>
  32. <image id="img{{index}}" src="/images/del2.png" bindtap="delGoods"/>
  33. </view>
  34. </view>
  35. </view>
  36. </view>
  37. </block>
  38. <!--footer-->
  39. <view class="total">
  40. <view class="total_text">合计：<text>￥{{total}}</text></view>
  41. <button class="total_js" size="mini">去结算({{goodsCount}})</button>
  42. </view>
  43. </view>
<!--要是够车内没有数据，就行显示没有数据-->
<view class="cart" hidden="{{iscart}}"><image src="/images/cart.png"/><view>购物车什么都没有，赶快去购物吧</view>
</view>
<!--要是有数据，就显示数据-->
<view class="cartList" hidden="{{!iscart}}"><!--header--><view class="baoyou"></view><!--list item--><block wx:for="{{cart}}"><view class="goods"><!--左侧图片--><view><image src="{{item.imgUrl}}" class="good-img"/></view><!--右侧说明部分--><view class="good-cont"><!--文字说明--><view class="goods-navigator"><text class="good-name">{{item.name}}</text></view><!--价钱和购物加减的父盒子--><view class="good-price"><text class="price">￥{{item.price}}</text><view class="btn-box"><view class="btn"><button id="del{{index}}" type="default" size="mini" bindtap="delCount">-</button><input  value="{{item.count}}"/><button id="add{{index}}" type="default" size="mini" bindtap="addCount">+</button></view><image id="img{{index}}" src="/images/del2.png" bindtap="delGoods"/></view></view></view></view></block><!--footer--><view class="total"><view class="total_text">合计：<text>￥{{total}}</text></view><button class="total_js" size="mini">去结算({{goodsCount}})</button></view>
</view>

cart.wxss：

[css] view plain copy print?
  1. page {
  2. background: #f2ebe3;
  3. }
  4. .cart {
  5. padding: 100px 0 0 0;
  6. display: flex;
  7. justify-content: center;
  8. flex-direction: column;
  9. align-items: center;
  10. color: #999;
  11. }
  12. .cart image {
  13. width: 66px;
  14. height: 66px;
  15. margin-bottom: 20px;
  16. }
  17. .baoyou {
  18. font-size: 18px;
  19. color: #db2929;
  20. padding: 10px;
  21. }
  22. .goods {
  23. background: #fff;
  24. border-top: 1px solid #ddd;
  25. margin-bottom: 10px;
  26. padding: 10px 10px 0 10px;
  27. display: flex;
  28. }
  29. .goods image {
  30. width: 80px;
  31. height: 80px;
  32. border: 1px solid #ddd;
  33. }
  34. .goods .good-cont {
  35. display: flex;
  36. flex: 1;
  37. flex-direction: column;
  38. color: #555;
  39. font-size: 14px;
  40. padding: 5px;
  41. height: 100px;
  42. }
  43. .goods .good-cont .goods-navigator {
  44. display: flex;
  45. flex: 2;
  46. }
  47. .goods .good-cont .good-price {
  48. display: flex;
  49. flex-direction: column;
  50. flex: 3;
  51. }
  52. .goods .good-cont .good-price .price {
  53. font-size: 16px;
  54. color: #ec5151;
  55. }
  56. .goods .good-cont .good-price .btn-box {
  57. display: flex;
  58. flex-direction: row;
  59. justify-content: space-between;
  60. }
  61. .goods .good-cont .good-price .btn-box image {
  62. width: 23px;
  63. height: 23px;
  64. border: 0;
  65. margin: 0;
  66. }
  67. .goods .good-cont .good-price .btn {
  68. display: flex;
  69. flex-direction: row;
  70. }
  71. .goods .good-cont .good-price .btn input {
  72. margin: 0;
  73. width: 40px;
  74. text-align: center;
  75. border: 1px solid #eee;
  76. font-size: 16px;
  77. height: 28px;
  78. }
  79. .goods .good-cont .good-price .btn button {
  80. margin: 0;
  81. }
  82. .total {
  83. height: 40px;
  84. display: flex;
  85. flex-direction: row;
  86. justify-content: space-between;
  87. padding: 0 20px;
  88. }
  89. .total .total_text {
  90. display: flex;
  91. color: #777;
  92. }
  93. .total .total_text text {
  94. color: #ec5151;
  95. }
  96. .total .total_js {
  97. color: #fff;
  98. background: #ec5151;
  99. height: 30px;
  100. margin: 0;
  101. }
page {background: #f2ebe3;
}.cart {padding: 100px 0 0 0;display: flex;justify-content: center;flex-direction: column;align-items: center;color: #999;
}.cart image {width: 66px;height: 66px;margin-bottom: 20px;
}.baoyou {font-size: 18px;color: #db2929;padding: 10px;
}.goods {background: #fff;border-top: 1px solid #ddd;margin-bottom: 10px;padding: 10px 10px 0 10px;display: flex;
}.goods image {width: 80px;height: 80px;border: 1px solid #ddd;
}.goods .good-cont {display: flex;flex: 1;flex-direction: column;color: #555;font-size: 14px;padding: 5px;height: 100px;
}.goods .good-cont .goods-navigator {display: flex;flex: 2;
}.goods .good-cont .good-price {display: flex;flex-direction: column;flex: 3;
}.goods .good-cont .good-price .price {font-size: 16px;color: #ec5151;
}.goods .good-cont .good-price .btn-box {display: flex;flex-direction: row;justify-content: space-between;
}.goods .good-cont .good-price .btn-box image {width: 23px;height: 23px;border: 0;margin: 0;
}.goods .good-cont .good-price .btn {display: flex;flex-direction: row;
}.goods .good-cont .good-price .btn input {margin: 0;width: 40px;text-align: center;border: 1px solid #eee;font-size: 16px;height: 28px;
}.goods .good-cont .good-price .btn button {margin: 0;
}.total {height: 40px;display: flex;flex-direction: row;justify-content: space-between;padding: 0 20px;
}.total .total_text {display: flex;color: #777;
}.total .total_text text {color: #ec5151;
}.total .total_js {color: #fff;background: #ec5151;height: 30px;margin: 0;
}

cart.js：

[html] view plain copy print?
  1. Page({
  2. data: {
  3. iscart: false,
  4. cart: [], //数据
  5. count: 1,   //商品数量默认是1
  6. total: 0,    //总金额
  7. goodsCount: 0 //数量
  8. },
  9. onLoad: function (options) {
  10. },
  11. onShow: function () {
  12. var that = this;
  13. // 获取产品展示页保存的缓存数据（购物车的缓存数组，没有数据，则赋予一个空数组）
  14. var arr = wx.getStorageSync('cart') || [];
  15. // 有数据的话，就遍历数据，计算总金额 和 总数量
  16. if (arr.length > 0) {
  17. for (var i in arr) {
  18. that.data.total += Number(arr[i].price) * Number(arr[i].count);
  19. that.data.goodsCount += Number(arr[i].count);
  20. }
  21. // 更新数据
  22. this.setData({
  23. iscart: true,
  24. cart: arr,
  25. total: that.data.total,
  26. goodsCount: that.data.goodsCount
  27. });
  28. }
  29. },
  30. onHide: function(){
  31. // 清除数据
  32. this.setData({
  33. iscart: false,
  34. cart: [], //数据
  35. total: 0,    //总金额
  36. goodsCount: 0 //数量
  37. });
  38. },
  39. /* 减数 */
  40. delCount: function (e) {
  41. console.log(e)
  42. // 获取购物车该商品的数量
  43. // [获取设置在该btn的id,即list的index值]
  44. if (this.data.cart[e.target.id.substring(3)].count <= 1) {
  45. return;
  46. }
  47. // 商品总数量-1
  48. this.data.goodsCount -= 1;
  49. // 总价钱 减去 对应项的价钱单价
  50. this.data.total -= Number(this.data.cart[e.target.id.substring(3)].price);
  51. // 购物车主体数据对应的项的数量-1  并赋给主体数据对应的项内
  52. this.data.cart[e.target.id.substring(3)].count = --this.data.cart[e.target.id.substring(3)].count;
  53. // 更新data数据对象
  54. this.setData({
  55. cart: this.data.cart,
  56. total: this.data.total,
  57. goodsCount: this.data.goodsCount
  58. })
  59. // 主体数据重新赋入缓存内
  60. try {
  61. wx.setStorageSync('cart', this.data.cart)
  62. } catch (e) {
  63. console.log(e)
  64. }
  65. },
  66. /* 加数 */
  67. addCount: function (e) {
  68. // 商品总数量+1
  69. this.data.goodsCount += 1;
  70. // 总价钱 加上 对应项的价钱单价
  71. this.data.total += Number(this.data.cart[e.target.id.substring(3)].price);
  72. // 购物车主体数据对应的项的数量+1  并赋给主体数据对应的项内
  73. this.data.cart[e.target.id.substring(3)].count = ++this.data.cart[e.target.id.substring(3)].count;
  74. // 更新data数据对象
  75. this.setData({
  76. cart: this.data.cart,
  77. total: this.data.total,
  78. goodsCount: this.data.goodsCount
  79. })
  80. // 主体数据重新赋入缓存内
  81. try {
  82. wx.setStorageSync('cart', this.data.cart)
  83. } catch (e) {
  84. console.log(e)
  85. }
  86. },
  87. /* 删除item */
  88. delGoods: function (e) {
  89. // 商品总数量  减去  对应删除项的数量
  90. this.data.goodsCount = this.data.goodsCount - this.data.cart[e.target.id.substring(3)].count;
  91. // 总价钱  减去  对应删除项的单价*数量
  92. this.data.total -= this.data.cart[e.target.id.substring(3)].price * this.data.cart[e.target.id.substring(3)].count;
  93. // 主体数据的数组移除该项
  94. this.data.cart.splice(e.target.id.substring(3), 1);
  95. // 更新data数据对象
  96. this.setData({
  97. cart: this.data.cart,
  98. total: this.data.total,
  99. goodsCount: this.data.goodsCount
  100. })
  101. // 主体数据重新赋入缓存内
  102. try {
  103. wx.setStorageSync('cart', this.data.cart)
  104. } catch (e) {
  105. console.log(e)
  106. }
  107. }
  108. })
Page({data: {iscart: false,cart: [], //数据count: 1,   //商品数量默认是1total: 0,    //总金额goodsCount: 0 //数量},onLoad: function (options) {},onShow: function () {var that = this;// 获取产品展示页保存的缓存数据（购物车的缓存数组，没有数据，则赋予一个空数组）var arr = wx.getStorageSync('cart') || [];// 有数据的话，就遍历数据，计算总金额 和 总数量if (arr.length > 0) {for (var i in arr) {that.data.total += Number(arr[i].price) * Number(arr[i].count);that.data.goodsCount += Number(arr[i].count);}// 更新数据this.setData({iscart: true,cart: arr,total: that.data.total,goodsCount: that.data.goodsCount});}},onHide: function(){// 清除数据this.setData({iscart: false,cart: [], //数据total: 0,    //总金额goodsCount: 0 //数量});},/* 减数 */delCount: function (e) {console.log(e)// 获取购物车该商品的数量// [获取设置在该btn的id,即list的index值]if (this.data.cart[e.target.id.substring(3)].count <= 1) {return;}// 商品总数量-1this.data.goodsCount -= 1;// 总价钱 减去 对应项的价钱单价this.data.total -= Number(this.data.cart[e.target.id.substring(3)].price);// 购物车主体数据对应的项的数量-1  并赋给主体数据对应的项内this.data.cart[e.target.id.substring(3)].count = --this.data.cart[e.target.id.substring(3)].count;// 更新data数据对象this.setData({cart: this.data.cart,total: this.data.total,goodsCount: this.data.goodsCount})// 主体数据重新赋入缓存内try {wx.setStorageSync('cart', this.data.cart)} catch (e) {console.log(e)}},/* 加数 */addCount: function (e) {// 商品总数量+1this.data.goodsCount += 1;// 总价钱 加上 对应项的价钱单价this.data.total += Number(this.data.cart[e.target.id.substring(3)].price);// 购物车主体数据对应的项的数量+1  并赋给主体数据对应的项内this.data.cart[e.target.id.substring(3)].count = ++this.data.cart[e.target.id.substring(3)].count;// 更新data数据对象this.setData({cart: this.data.cart,total: this.data.total,goodsCount: this.data.goodsCount})// 主体数据重新赋入缓存内try {wx.setStorageSync('cart', this.data.cart)} catch (e) {console.log(e)}},/* 删除item */delGoods: function (e) {// 商品总数量  减去  对应删除项的数量this.data.goodsCount = this.data.goodsCount - this.data.cart[e.target.id.substring(3)].count;// 总价钱  减去  对应删除项的单价*数量this.data.total -= this.data.cart[e.target.id.substring(3)].price * this.data.cart[e.target.id.substring(3)].count;// 主体数据的数组移除该项this.data.cart.splice(e.target.id.substring(3), 1);// 更新data数据对象this.setData({cart: this.data.cart,total: this.data.total,goodsCount: this.data.goodsCount})// 主体数据重新赋入缓存内try {wx.setStorageSync('cart', this.data.cart)} catch (e) {console.log(e)}}
})

运行结果：

demo：http://download.csdn.net/detail/michael_ouyang/9825344

更多小程序的教程

微信开发者工具的快捷键

微信小程序的文件结构 —— 微信小程序教程系列（1）

微信小程序的生命周期实例演示 —— 微信小程序教程系列（2）

微信小程序的动态修改视图层的数据 —— 微信小程序教程系列（3）

微信小程序的新建页面 —— 微信小程序教程系列（4）

微信小程序的如何使用全局属性 —— 微信小程序教程系列（5）

微信小程序的页面跳转 —— 微信小程序教程系列（6）

微信小程序标题栏和导航栏的设置 —— 微信小程序教程系列（7）

微信小程序的作用域和模块化 —— 微信小程序教程系列（8）

微信小程序视图层的数据绑定 —— 微信小程序教程系列（9）

微信小程序视图层的条件渲染 —— 微信小程序教程系列（10）

微信小程序视图层的列表渲染 —— 微信小程序教程系列（11）

微信小程序视图层的模板 —— 微信小程序教程系列（12）

微信小程序wxss的尺寸单位rpx —— 微信小程序教程系列（13）

微信小程序的网络请求 —— 微信小程序教程系列（14）

微信小程序的百度地图获取地理位置 —— 微信小程序教程系列（15）

微信小程序使用百度api获取天气信息 —— 微信小程序教程系列（16）

微信小程序获取系统日期和时间 —— 微信小程序教程系列（17）

微信小程序之顶部导航栏实例 —— 微信小程序实战系列（1）

微信小程序之上拉加载（分页加载）实例 —— 微信小程序实战系列（2）

微信小程序之轮播图实例 —— 微信小程序实战系列（3）

微信小程序之仿android fragment之可滑动的底部导航栏实例  —— 微信小程序实战系列（4）

微信小程序之登录页实例 —— 微信小程序实战系列（5）

微信小程序之自定义toast实例 —— 微信小程序实战系列（6）

微信小程序之自定义抽屉菜单（从下拉出）实例 —— 微信小程序实战系列（7）

微信小程序之自定义模态弹窗（带动画）实例 —— 微信小程序实战系列（8）

微信小程序之侧栏分类 —— 微信小程序实战商城系列（1）

微信小程序之仿淘宝分类入口 —— 微信小程序实战商城系列（2）

微信小程序之购物数量加减 —— 微信小程序实战商城系列（3）

微信小程序之商品属性分类 —— 微信小程序实战商城系列（4）

更多小程序的教程请查看：http://blog.csdn.net/michael_ouyang/article/details/54700871

谢谢观看，不足之处，敬请指导

阅读全文      
版权声明：本文为博主原创文章，转载务必注明出处，http://blog.csdn.net/michael_ouyang。

转载于:https://www.cnblogs.com/freeliver54/p/7871823.html

[转]微信小程序之购物车 —— 微信小程序实战商城系列（5）相关推荐

  1. 微信小程序之购物车 —— 微信小程序实战商城系列（5）

    续上一篇的文章:微信小程序之商品属性分类 -- 微信小程序实战商城系列(4) 自从认识某人后,我收获了两个成功.登录成功.付款成功,而且还拥有了自己的一辆车: 购物车 也发现了自己的不足之处: 余额不 ...

  2. 微信小程序之仿淘宝分类入口 —— 微信小程序实战商城系列（2）

    分类入口,已经成为了商城项目必须的布局之一,这里以仿照淘宝的分类入口来做案例 下图红框部分,就是本文重点讲解部分,另外本文并没有写点击某个入口跳转页面. 如需学习页面跳转的同学,可以参考此文 微信小程 ...

  3. 微信小程序之组件 —— 微信小程序教程系列（19）

    什么是组件: 组件是视图层的基本组成单元. 组件自带一些功能与微信风格的样式. 一个组件通常包括开始标签和结束标签,属性用来修饰这个组件,内容在两个标签之内. <tagname property ...

  4. 微信小程序的文件结构 —— 微信小程序教程系列（1）

    文件结构 示例目录:HelloWorld *******************************************************分割线********************* ...

  5. 微信小程序：商城系列专辑（开发指南+精品Demo）

    商城开发指南: 微信小程序商城模块 | 链接 使用zanui开发小程序微商城(模板组件的开发规范)| 链接 ecshop商城开发:用户信息的获取和缓存,地址信息的缓存 | 链接 微信小程序商城 - 基 ...

  6. 小程序飞入购物车特效

    小程序飞入购物车特效 小程序加入购物车动画效果:点击商品,出现一个小的商品图,呈现曲线(贝塞尔曲线/抛物线)飞向购物车的图标里. app.js App({onLaunch: function () { ...

  7. 微信小程序（购物车）--在wxml中设置保留小数位数

    微信小程序(购物车)–在wxml中设置保留小数位数 一.在该页面文件夹下新建一个wxs后缀的文件 var filters = {toFix: function (value) {return valu ...

  8. 微信小程序全选，微信小程序checkbox，微信小程序购物车

    微信小程序,这里实现微信小程序checkbox,有需要此功能的朋友可以参考下. 摘要: 加减商品数量,汇总价格,全选与全不选 设计思路: 一.从网络上传入以下Json数据格式的数组  1.标题titl ...

  9. 微信小程序实现购物车功能，包含完整小程序代码和运行效果截图

    微信小程序实现购物车功能,在商场比较常见,今天刚刚做好,效果不错. 下面从js文件,json文件,wxml文件和wxss文件,分享给大家. 直接上代码: 目录 1.index.js文件内容 2.ind ...

最新文章

  1. GC优化利器 - HBase2.0全链路offheap
  2. 【解题报告】Leecode 519. 随机翻转矩阵——Leecode每日一题系列
  3. vue打包后放在 nginx部署时候的配置文件
  4. js怎么调用wasm_对于WebAssembly编译出来的.wasm文件js如何调用
  5. Java web后端5 JSP技术
  6. 004-linux常用命令-权限管理命令
  7. POP Animation 和 layoutSubviews 的冲突
  8. spring的IOC——依赖注入的两种实现类型
  9. APP自动化测试-2. Appium录制测试用例
  10. 南天PR2、PR2E驱动下载，xp，win7，win8，win8.1，win10 32位64位驱动下载安装教程
  11. 2009牛年春节祝福短信集锦
  12. python爬取文献资料_Python 批量爬取Web of Science 文献信息数据
  13. jQuery的siblings方法
  14. macos可以升级到指定版本吗_如何升级mac系统版本？
  15. table thead tr设置表头背景色未完全覆盖的问题
  16. pycocotools and mmpycocotools 循环报错
  17. java错误代码1061_异常求解 小白
  18. 透过汽车之家二手车业务，看二手车市场的模式终局
  19. 黄金期货的交易原则有哪些？
  20. 黑马培训的点滴（前端）

热门文章

  1. 【数据结构】无向图的遍历（广度搜索和深度搜索）
  2. 从理论到实战，带你全面解读智能物联网技术
  3. nginx同域名动静态分离
  4. matlab 截断共轭梯度法,最优化作业 共轭梯度法 matlab代码
  5. 数字经济与数字化转型
  6. C语言每日一练——第73天：谁是窃贼问题
  7. Java 6-2：收放自如，融汇贯通，让线程不再疯癫——线程的阻塞和关闭
  8. 农村信用社计算机类资料,农村信用社笔试复习资料：计算机知识（3）
  9. 计算机底层知识之内存
  10. mysql报1032_MySQL SQL_ERROR 错误号 1032解决办法