亚洲必赢app在哪下载[转]微信小序的购物车 —— 微信小程序实战商城系列(5)

By admin in 亚洲必赢app在哪下载 on 2018年10月13日

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

补充上一致首的文章:微信小序的商品特性分类  ——
微信小程序实战商城系列(4)

 

自从认识某后,我抱了少数只成功。登录成功、付款成功,而且还具备了团结之一律部车:

购物车

啊发现了温馨之不足之处:

余额不足。

为大家介绍的虽是购物车

此地演示从商品列表中补充加至购物车

下先开商品列表页。如下图:

亚洲必赢app在哪下载 1

 

 

布局分析:

第一一个list的主盒子,接着是item盒子,这是得的。
     
然后将item分成左侧的图纸有,和右手的辨证有(item盒子使用横向弹性盒)
           
右侧的求证一些以分上下2部分(右侧说明部分盒子使用纵向弹性盒)                  
下面价钱购物车有的(下面价钱购物车有的也采取横向弹性盒,中间以justify-content:
space-between;填充空白)

亚洲必赢app在哪下载 2

 

 

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=”new_73.jpg” bindtap=”addcart” />  
  27.           </view>  
  28.         </view>  
  29.       </view>  
  30.     </block>  
  31.   </view>  
  32. </view>  




    商品列表
    更多














    {{item.name}}



    ¥{{item.price}}






index.wxss:

[css] view
plain
copy
print?

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

    /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)
               }
           }
       }
    

    }
    })

编制购物车有的,如下图所示:

亚洲必赢app在哪下载 3

 

 

布局分析:

首先一个list的主盒子,接着是item盒子,这是要的。

    然后将item分成左侧的图纸部分,和右边的验证有些(item盒子使用横向弹性盒)

        右侧的说明一些还要分上下2部分(右侧说明部分盒子使用纵向弹性盒)

                        下面价钱、购物加减、购物车有(使用纵向弹性盒)

               
最下面的购物加减、购物车有(使用横向弹性盒,中间以justify-content:
space-between;填充空白)

亚洲必赢app在哪下载 4

 

 

cart.wxml:

[html] view
plain
copy
print?

  1. <!–要是十足车内无数,就行显示没有数–>  
  2. <view class=”cart” hidden=”{{iscart}}”>  
  3.     <image src=”rt.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=”l2.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>  



cart.wxss:

[css] view
plain
copy
print?

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

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

    Page({
    data: {

       iscart: false,
       cart: [], //数据
       count: 1,   //商品数量默认是1
       total: 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;
       }
       // 商品总数量-1
       this.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) {

       // 商品总数量+1
       this.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)
       }
    

    }
    })

 

运行结果:

亚洲必赢app在哪下载 5

 

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。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2018 亚洲必赢app官方下载 版权所有