微信小程序之加载更加多,微信小程序之购物车

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

本文转自;http://blog.csdn.net/michael_ouyang/article/details/56846185

续上一篇的篇章:微信小程序之商品天性分类  ——
微信小程序实战商场类别(四)

loadmore

 

加载更加多(分页加载)

自打认知某人后,笔者赢得了八个成功。登百分之六十功、付款成功,而且还具有了友好的壹辆车:

 

购物车

当用户张开三个页面时,假使后台数据量庞大时,1次性地重临全部数据给客户端,页面包车型大巴打开速度就能够有着下跌,而且用户只看上边的内容而不需求看前边的剧情时,也浪成本户流量,基于优化的角度来设想,后台不要2次性再次来到全数数据,当用户有亟待再往下翻的时候,再加载尤其数据出来。

也意识了和煦的不足之处:

 

余额不足。

政工供给:

为大家介绍的就是购物车

列表滚动到底层时,继续往上拉,加载越来越多内容

那边演示从事商业品列表中增多到购物车

 

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

必备参数:

图片 1

(一)pageindex: 1 //第四遍加载

 

(2)callbackcount: 一五 //供给重返数据的个数

 

别的参数:

布局剖判:

依靠接口的所需参数

先是叁个list的主盒子,接着是item盒子,那是必须的。
     
然后把item分成左边的图样部分,和右边的证实一些(item盒子使用横向弹性盒)
           
左侧的印证有个别又分上下2部分(左边表达有个别盒子使用纵向弹性盒)                  
上面价钱购物车有的(下边价钱购物车有的也接纳横向弹性盒,中间使用justify-content:
space-between;填充空白)

 

图片 2

兑现原理:

 

当第二次访问接口时,传递二个供给参数(第三回加载,须要回到数据的个数为一四个),和别的参数(要求搜索的字符串)给后台,后台重返第一次数据复苏。在央求成功的的回调函数中,判定重临的数量是或不是>0,是,则收取数据,渲染视图层,并把“上拉加载”展现在列表尾部;否,则并未有数量可取,并把“未有越来越多”突显在列表尾部,同时把“上拉加载”隐藏掉。

 

当用户已经滚动到列表尾部(这里运用到小程序提供的scroll-view组件的bindscrolltolower事件),触发bindscrolltolower事件,参数pageindex+1,再把三个供给参数(第三回加载,须要重回数据的个数为1多少个)和别的参数(要求寻觅的字符串)给后台,后台把别的的数额重返给前台,前台在原来数据的功底上添增添少。

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:

wxml:

[css] view
plain

copy
print?

[html] 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;
    

    }

  1. <view class=”search”>  
  2.   <view class=”search-bar”>  
  3.     <view class=”search-wrap”>  
  4.         <icon type=”search” size=”16″ class=”icon-search” />  
  5.         <input type=”text” placeholder=”请输入寻觅内容” class=”search-input” name=”searchKeyword” bindinput=”bindKeywordInput” value=”{{searchKeyword}}” />  
  6.     </view>  
  7.     <view class=”search-cancel” bindtap=”keywordSearch”>搜索</view>  
  8.   </view>  
  9.   <view class=”search-result”>  
  10.     <scroll-view scroll-y=”true” bindscrolltolower=”searchScrollLower”>  
  11.       <view class=”result-item” wx:for=”{{searchSongList}}” wx:key=”unique”  data-data=”{{item}}” >  
  12.         <view class=”icon{{item.isonly==’0′ ? ‘ nocopyright’ : ”}}”></view>  
  13.         <text class=”title”>{{item.songname}}</text>  
  14.         <view class=”subtitle”>  
  15.           <text wx:for=”{{item.singer}}” wx:key=”unique”>{{item.name}}</text>  
  16.         </view>  
  17.       </view>  
  18.       <view class=”loading” hidden=”{{!searchLoading}}”>正在载入愈来愈多…</view>  
  19.       <view class=”loading complete” hidden=”{{!searchLoadingComplete}}”>已加载全体</view>  
  20.     </scroll-view>    
  21.   </view>  
  22. </view>  







    搜索





    {{item.songname}}

    {{item.name}}






 

 

index.js**:**

js:

数量部分,一般情状都是访问接口获取数据的,这里并不曾行使互连网访问,为了简化demo,直接把1组数据放在data对象中。同学们能够依据其数据结构自个儿编写后台接口

 

[javascript] view
plain

copy
print?

[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:”女子服装奶罩中长款大码摆裙春夏新款”,  
  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:”火亮春首秋 男青年修身款圆领男生胸衣”,  
  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.             // 列表中某1项item的id == 点击事件传递过来的id。则是被点击的项  
  62.             if(this.data.goodslist[i].id == e.target.id){  
  63.                 // 给goodsList数组的日前项增添count成分,值为一,用于记录添加到购物车的数量  
  64.                 this.data.goodslist[i].count = 1;  
  65.                 // 获取购物车的缓存数组(未有数量,则给予1个空数组)  
  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(即再一次添参预购物车,数量+一)  
  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)
               }
           }
       }
    

    }
    })

  1. var util = require(‘../../utils/util.js’)  
  2. Page({  
  3.   data: {  
  4.     searchKeyword: ”,  //要求找寻的字符  
  5.     searchSongList: [], //放置再次回到数据的数组  
  6.     isFromSearch: true,   // 用于判定searchSongList数组是或不是空数组,私下认可true,空的数组  
  7.     searchPageNum: 1,   // 设置加载的第五遍,默许是首先次  
  8.     callbackcount: 1五,      //再次回到数据的个数  
  9.     searchLoading: false, //”上拉加载”的变量,私下认可false,隐藏  
  10.     searchLoadingComplete: false  //“未有数量”的变量,暗许false,隐藏  
  11.   },  
  12.   //输入框事件,每输入二个字符,就能够接触1回  
  13.   bindKeywordInput: function(e){  
  14.     console.log(“输入框事件”)  
  15.     this.setData({  
  16.       searchKeyword: e.detail.value  
  17.     })  
  18.   },  
  19.   //搜索,访问网络  
  20.   fetchSearchList: function(){  
  21.     let that = this;  
  22.     let searchKeyword = that.data.searchKeyword,//输入框字符串作为参数  
  23.         searchPageNum = that.data.searchPageNum,//把第两回加载次数作为参数  
  24.         callbackcount =that.data.callbackcount; //重返数据的个数  
  25.     //访问互联网  
  26.     util.getSearchMusic(searchKeyword, searchPageNum,callbackcount, function(data){  
  27.       console.log(data)  
  28.       //决断是或不是有数量,有则取多少  
  29.       if(data.data.song.curnum != 0){  
  30.         let searchList = [];  
  31.         //假如isFromSearch是true从data中抽取数据,不然先从原本的数量继续丰盛  
  32.         that.data.isFromSearch ? searchList=data.data.song.list : searchList=that.data.searchSongList.concat(data.data.song.list)  
  33.         that.setData({  
  34.           searchSongList: searchList, //获取数据数组  
  35.           zhida: data.data.zhida, //存放歌唱家属性的指标  
  36.           searchLoading: true   //把”上拉加载”的变量设为false,显示  
  37.         });  
  38.       //未有多少了,把“未有数据”展现,把“上拉加载”隐藏  
  39.       }else{  
  40.         that.setData({  
  41.           searchLoadingComplete: true, //把“未有数量”设为true,展现  
  42.           searchLoading: false  //把”上拉加载”的变量设为false,隐藏  
  43.         });  
  44.       }  
  45.     })  
  46.   },  
  47.   //点击寻找按键,触发事件  
  48.   keywordSearch: function(e){  
  49.     this.setData({    
  50.       searchPageNum: 一,   //第一次加载,设置1  
  51.       searchSongList:[],  //放置重临数据的数组,设为空  
  52.       isFromSearch: true,  //第贰回加载,设置true  
  53.       searchLoading: true,  //把”上拉加载”的变量设为true,展现  
  54.       searchLoadingComplete:false //把“未有数据”设为false,隐藏  
  55.     })  
  56.     this.fetchSearchList();  
  57.   },  
  58.   //滚动到底层触发事件  
  59.   searchScrollLower: function(){  
  60.     let that = this;  
  61.     if(that.data.searchLoading && !that.data.searchLoadingComplete){  
  62.       that.setData({  
  63.         searchPageNum: that.data.searchPageNum+一,  //每趟触发上拉事件,把searchPageNum+1  
  64.         isFromSearch: false  //触发到上拉事变,把isFromSearch设为为false  
  65.       });  
  66.       that.fetchSearchList();  
  67.     }  
  68.   }  
  69. })  

    var util = require(‘../../utils/util.js’)
    Page({
    data: {

    searchKeyword: '',  //需要搜索的字符
    searchSongList: [], //放置返回数据的数组
    isFromSearch: true,   // 用于判断searchSongList数组是不是空数组,默认true,空的数组
    searchPageNum: 1,   // 设置加载的第几次,默认是第一次
    callbackcount: 15,      //返回数据的个数
    searchLoading: false, //"上拉加载"的变量,默认false,隐藏
    searchLoadingComplete: false  //“没有数据”的变量,默认false,隐藏
    

    },
    //输入框事件,每输入一个字符,就能够接触一遍 bindKeywordInput: function(e){

    console.log("输入框事件")
    this.setData({
      searchKeyword: e.detail.value
    })
    

    },
    //寻觅,访问网络 fetchSearchList: function(){

    let that = this;
    let searchKeyword = that.data.searchKeyword,//输入框字符串作为参数
        searchPageNum = that.data.searchPageNum,//把第几次加载次数作为参数
        callbackcount =that.data.callbackcount; //返回数据的个数
    //访问网络
    util.getSearchMusic(searchKeyword, searchPageNum,callbackcount, function(data){
      console.log(data)
      //判断是否有数据,有则取数据
      if(data.data.song.curnum != 0){
        let searchList = [];
        //如果isFromSearch是true从data中取出数据,否则先从原来的数据继续添加
        that.data.isFromSearch ? searchList=data.data.song.list : searchList=that.data.searchSongList.concat(data.data.song.list)
        that.setData({
          searchSongList: searchList, //获取数据数组
          zhida: data.data.zhida, //存放歌手属性的对象
          searchLoading: true   //把"上拉加载"的变量设为false,显示
        });
      //没有数据了,把“没有数据”显示,把“上拉加载”隐藏
      }else{
        that.setData({
          searchLoadingComplete: true, //把“没有数据”设为true,显示
          searchLoading: false  //把"上拉加载"的变量设为false,隐藏
        });
      }
    })
    

    },
    //点击找寻按钮,触发事件
    keywordSearch: function(e){

    this.setData({  
      searchPageNum: 1,   //第一次加载,设置1
      searchSongList:[],  //放置返回数据的数组,设为空
      isFromSearch: true,  //第一次加载,设置true
      searchLoading: true,  //把"上拉加载"的变量设为true,显示
      searchLoadingComplete:false //把“没有数据”设为false,隐藏
    })
    this.fetchSearchList();
    

    },
    //滚动到底层触发事件
    searchScrollLower: function(){

    let that = this;
    if(that.data.searchLoading && !that.data.searchLoadingComplete){
      that.setData({
        searchPageNum: that.data.searchPageNum+1,  //每次触发上拉事件,把searchPageNum+1
        isFromSearch: false  //触发到上拉事件,把isFromSearch设为为false
      });
      that.fetchSearchList();
    }
    

    }
    })

编排购物车部分,如下图所示:

 

图片 3

 

 

util.js:

 

[javascript] view
plain

copy
print?

布局解析:

  1. function getSearchMusic(keyword, pageindex, callbackcount, callback){  
  2.   wx.request({  
  3.     url: ‘https://c.y.qq.com/soso/fcgi-bin/search\_for\_qq\_cp‘,  
  4.     data: {  
  5.       g_tk: 5381,  
  6.       uin: 0,  
  7.       format: ‘json’,  
  8.       inCharset: ‘utf-8’,  
  9.       outCharset: ‘utf-8’,  
  10.       notice: 0,  
  11.       platform: ‘h5’,  
  12.       needNewCode: 1,  
  13.       w: keyword,  
  14.       zhidaqu: 1,  
  15.       catZhida: 1,  
  16.       t: 0,  
  17.       flag: 1,  
  18.       ie: ‘utf-8’,  
  19.       sem: 1,  
  20.       aggr: 0,  
  21.       perpage: 20,  
  22.       n: callbackcount,  //再次回到数据的个数  
  23.       p: pageindex,  
  24.       remoteplace: ‘txt.mqq.all’,  
  25.       _: Date.now()  
  26.     },  
  27.     method: ‘GET’,  
  28.     header: {‘content-Type’: ‘application/json’},  
  29.     success: function(res){  
  30.       if(res.statusCode == 200){  
  31.         callback(res.data);  
  32.       }  
  33.     }  
  34.   })  
  35. }  
  36.   
  37. module.exports = {  
  38.   getSearchMusic: getSearchMusic  
  39. }  

    function getSearchMusic(keyword, pageindex, callbackcount, callback){
    wx.request({

    url: 'https://c.y.qq.com/soso/fcgi-bin/search_for_qq_cp',
    data: {
      g_tk: 5381,
      uin: 0,
      format: 'json',
      inCharset: 'utf-8',
      outCharset: 'utf-8',
      notice: 0,
      platform: 'h5',
      needNewCode: 1,
      w: keyword,
      zhidaqu: 1,
      catZhida: 1,
      t: 0,
      flag: 1,
      ie: 'utf-8',
      sem: 1,
      aggr: 0,
      perpage: 20,
      n: callbackcount,  //返回数据的个数
      p: pageindex,
      remoteplace: 'txt.mqq.all',
      _: Date.now()
    },
    method: 'GET',
    header: {'content-Type': 'application/json'},
    success: function(res){
      if(res.statusCode == 200){
        callback(res.data);
      }
    }
    

    })
    }

    module.exports = {
    getSearchMusic: getSearchMusic
    }

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

 

    然后把item分成左边的图形部分,和左边的证实一些(item盒子使用横向弹性盒)

wxss:

        右边的辨证部分又分上下2部分(左侧表达部分盒子使用纵向弹性盒)

[css] view
plain

copy
print?

                        上边价钱、购物加减、购物车有的(使用纵向弹性盒)

  1. page{  
  2.   display: flex;  
  3.   flex-direction: column;  
  4.   height: 100%;  
  5. }  
  6.   
  7. /*搜索*/  
  8. .search{  
  9.   flex: auto;  
  10.   display: flex;  
  11.   flex-direction: column;  
  12.   background: #fff;  
  13. }  
  14. .search-bar{  
  15.   flex: none;  
  16.   display: flex;  
  17.   align-items: center;  
  18.   justify-content: space-between;  
  19.   padding: 20rpx;  
  20.   background: #f4f4f4;  
  21. }  
  22. .search-wrap{  
  23.   position: relative;  
  24.   flex: auto;  
  25.   display: flex;  
  26.   align-items: center;  
  27.   height: 80rpx;  
  28.   padding: 0 20rpx;  
  29.   background: #fff;  
  30.   border-radius: 6rpx;  
  31. }  
  32. .search-wrap .icon-search{  
  33.   margin-right: 10rpx;  
  34. }  
  35. .search-wrap .search-input{  
  36.   flex: auto;  
  37.   font-size: 28rpx;  
  38. }  
  39. .search-cancel{  
  40.   padding: 0 20rpx;  
  41.   font-size: 28rpx;  
  42. }  
  43.   
  44. /*寻找结果*/  
  45. .search-result{  
  46.   flex: auto;  
  47.   position: relative;  
  48. }  
  49. .search-result scroll-view{  
  50.   position: absolute;  
  51.   bottom: 0;  
  52.   left: 0;  
  53.   right: 0;  
  54.   top: 0;  
  55. }  
  56. .result-item{  
  57.   position: relative;  
  58.   display: flex;  
  59.   flex-direction: column;  
  60.   padding: 20rpx 0 20rpx 110rpx;  
  61.   overflow: hidden;  
  62.   border-bottom: 2rpx solid #e5e5e5;  
  63. }  
  64.   
  65. .result-item .media{  
  66.   position: absolute;  
  67.   left: 16rpx;  
  68.   top: 16rpx;  
  69.   width: 80rpx;  
  70.   height: 80rpx;  
  71.   border-radius: 999rpx;  
  72. }  
  73. .result-item .title,  
  74. .result-item .subtitle{  
  75.   overflow: hidden;  
  76.   text-overflow: ellipsis;  
  77.   white-space: nowrap;  
  78.   line-height: 36rpx;  
  79. }  
  80. .result-item .title{  
  81.   margin-bottom: 4rpx;  
  82.   color: #000;  
  83. }  
  84. .result-item .subtitle{  
  85.   color: #808080;  
  86.   font-size: 24rpx;  
  87. }  
  88. .result-item:first-child .subtitle text{  
  89.   margin-right: 20rpx;  
  90. }  
  91. .result-item:not(:first-child) .subtitle text:not(:first-child):before{  
  92.   content: ‘/’;  
  93.   margin: 0 8rpx;  
  94. }  
  95. .loading{  
  96.   padding: 10rpx;  
  97.   text-align: center;  
  98. }  
  99. .loading:before{  
  100.   display: inline-block;  
  101.   margin-right: 5rpx;  
  102.   vertical-align: middle;  
  103.   content: ”;  
  104.   width: 40rpx;  
  105.   height: 40rpx;  
  106.   background: url(../..icon-loading.png) no-repeat;  
  107.   background-size: contain;  
  108.   animation: rotate 1s linear infinite;  
  109. }  
  110. .loading.complete:before{  
  111.   display: none;  
  112. }  

    page{
    display: flex;
    flex-direction: column;
    height: 100%;
    }

    /搜索/
    .search{
    flex: auto;
    display: flex;
    flex-direction: column;
    background: #fff;
    }
    .search-bar{
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx;
    background: #f4f4f4;
    }
    .search-wrap{
    position: relative;
    flex: auto;
    display: flex;
    align-items: center;
    height: 80rpx;
    padding: 0 20rpx;
    background: #fff;
    border-radius: 6rpx;
    }
    .search-wrap .icon-search{
    margin-right: 10rpx;
    }
    .search-wrap .search-input{
    flex: auto;
    font-size: 28rpx;
    }
    .search-cancel{
    padding: 0 20rpx;
    font-size: 28rpx;
    }

    /找寻结果/
    .search-result{
    flex: auto;
    position: relative;
    }
    .search-result scroll-view{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    }
    .result-item{
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 20rpx 0 20rpx 110rpx;
    overflow: hidden;
    border-bottom: 2rpx solid #e5e5e5;
    }

    .result-item .media{
    position: absolute;
    left: 16rpx;
    top: 16rpx;
    width: 80rpx;
    height: 80rpx;
    border-radius: 999rpx;
    }
    .result-item .title,
    .result-item .subtitle{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 36rpx;
    }
    .result-item .title{
    margin-bottom: 4rpx;
    color: #000;
    }
    .result-item .subtitle{
    color: #808080;
    font-size: 24rpx;
    }
    .result-item:first-child .subtitle text{
    margin-right: 20rpx;
    }
    .result-item:not(:first-child) .subtitle text:not(:first-child):before{
    content: ‘/’;
    margin: 0 8rpx;
    }
    .loading{
    padding: 10rpx;
    text-align: center;
    }
    .loading:before{
    display: inline-block;
    margin-right: 5rpx;
    vertical-align: middle;
    content: ”;
    width: 40rpx;
    height: 40rpx;
    background: url(../..icon-loading.png) no-repeat;
    background-size: contain;
    animation: rotate 1s linear infinite;
    }
    .loading.complete:before{
    display: none;
    }

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

 

图片 4

运行:

 

图片 5

 

 

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>  



微信小程序教程类别

 

有关连接:http://blog.csdn.net/michael_ouyang/article/details/54700871

 

cart.wxss:

基础篇


微信开垦者工具的快捷键

微信小程序的文书结构  ——
微信小程序教程种类(1)

微信小程序的生命周期实例演示 —— 
微信小程序教程种类(贰)

微信小程序的动态修改视图层的数据 —— 
微信小程序教程种类(3)

微信小程序的新建页面 ——
微信小程序教程连串(四)

微信小程序的怎样选用全局属性 —— 
微信小程序教程连串(5)

微信小程序的页面跳转 ——
微信小程序教程连串(六)

微信小程序标题栏和导航栏的装置 —— 
微信小程序教程体系(七)

微信小程序的功用域和模块化 ——
微信小程序教程体系(八)

微信小程序视图层的多寡绑定 ——
微信小程序教程连串(玖)

微信小程序视图层的准绳渲染 ——
微信小程序教程种类(10)

微信小程序视图层的列表渲染 ——
微信小程序教程体系(11)

微信小程序视图层的模版 ——
微信小程序教程体系(12)

微信小程序之wxss  ——
微信小程序教程体系(一三)

微信小程序的网络请求 ——
微信小程序教程体系(1四)

微信小程序的百度地图获取地理地方 —— 
微信小程序教程种类(一五)

微信小程序行使百度api获取天气消息  ——
微信小程序教程类别(16)

微信小程序猎取系统日期和时间 —— 
微信小程序教程类别(一七)

微信小程序之上拉加载和下拉刷新 —— 
微信小程序教程连串(1八)

微信小程序之组件 ——
微信小程序教程种类(1玖)

微信小程序之微信登入 ——
微信小程序教程连串(20)

 

 

 

[css] view
plain

copy
print?

实战篇


微信小程序之顶端导航栏实例 ——
微信小程序实战种类(一)

微信小程序之上拉加载(分页加载)实例  ——
微信小程序实战类别(二)

微信小程序之轮播图实例 ——
微信小程序实战体系(3)

微信小程序之仿android
fragment之可滑动的后面部分导航栏实例  ——
微信小程序实战连串(4)

微信小程序之登6页实例 ——
微信小程序实战连串(5)

微信小程序之自定义toast实例 —— 
微信小程序实战类别(陆)

微信小程序之自定义抽屉菜单(从下拉出)实例  ——
微信小程序实战种类(7)

微信小程序之自定义模态弹窗(带动画)实例  ——
微信小程序实战种类(八)

 

 

  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;
    }

电商篇


微信小程序之侧栏分类 
——
微信小程序实战店肆类别(一)

微信小程序之仿Tmall分类入口 ——
微信小程序实战商场体系(二)

微信小程序之购物数量加减 ——
微信小程序实战商店体系(三)

微信小程序之商品属性分类 ——
微信小程序实战商铺体系(四)

微信小程序之购物车 ——
微信小程序实战商铺种类(伍)

 

未完待续。。。

 

更加多小程序的科目:http://blog.csdn.net/column/details/14653.html

多谢观察,不足之处,敬请指引

 

附:项目下载地址 http://download.csdn.net/detail/michael\_ouyang/9773794

 

cart.js:

[html] view
plain

copy
print?

  1. Page({  
  2.     data: {  
  3.         iscart: false,  
  4.         cart: [], //数据  
  5.         count: 壹,   //商品数量默许是一  
  6.         total: 0,    //总金额  
  7.         goodsCount: 0 //数量  
  8.     },  
  9.     onLoad: function (options) {  
  10.          
  11.     },  
  12.     onShow: function () {  
  13.         var that = this;  
  14.         // 获取产品体现页保存的缓存数据(购物车的缓存数组,未有数据,则予以3个空数组)  
  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.         // 商品总量量-壹  
  49.         this.data.goodsCount -= 1;  
  50.         // 总价钱 减去 对应项的价位单价  
  51.         this.data.total -= Number(this.data.cart[e.target.id.substring(3)].price);  
  52.         // 购物车注重数量对应的项的数目-一  并赋给主旨数量对应的项内  
  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.         // 商品总数据+壹  
  70.         this.data.goodsCount += 1;  
  71.         // 总价钱 加上 对应项的价钱单价  
  72.         this.data.total += Number(this.data.cart[e.target.id.substring(3)].price);  
  73.         // 购物车器重数量对应的项的数目+壹  并赋给大旨数量对应的项内  
  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)
       }
    

    }
    })

 

运作结果:

图片 6

 

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

 

越多小程序的教程

 

 

微信开荒者工具的神速键

微信小程序的公文结构 ——
微信小程序教程类别(一)

微信小程序的生命周期实例演示 ——
微信小程序教程系列(贰)

微信小程序的动态修改视图层的数据 ——
微信小程序教程种类(三)

微信小程序的新建页面 ——
微信小程序教程连串(肆)

微信小程序的如何接纳全局属性 ——
微信小程序教程类别(五)

微信小程序的页面跳转 ——
微信小程序教程类别(陆)

微信小程序标题栏和导航栏的设置 ——
微信小程序教程体系(⑦)

微信小程序的成效域和模块化 ——
微信小程序教程类别(八)

微信小程序视图层的多寡绑定 ——
微信小程序教程类别(玖)

微信小程序视图层的规格渲染 ——
微信小程序教程体系(十)

微信小程序视图层的列表渲染 ——
微信小程序教程类别(11)

微信小程序视图层的模板 ——
微信小程序教程连串(1二)

微信小程序wxss的尺寸单位rpx ——
微信小程序教程种类(一三)

微信小程序的互联网请求 ——
微信小程序教程连串(14)

微信小程序的百度地图获取地理地点 ——
微信小程序教程类别(1伍)

微信小程序接纳百度api获取天气消息 ——
微信小程序教程体系(16)

微信小程序获得系统日期和岁月 ——
微信小程序教程种类(一七)

微信小程序之最上端导航栏实例 ——
微信小程序实战种类(壹)

微信小程序之上拉加载(分页加载)实例 ——
微信小程序实战体系(2)

微信小程序之轮播图实例 ——
微信小程序实战连串(三)

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

 

微信小程序之登录页实例 ——
微信小程序实战类别(5)

微信小程序之自定义toast实例
——
微信小程序实战体系(六)

微信小程序之自定义抽屉菜单(从下拉出)实例 ——
微信小程序实战种类(柒)

微信小程序之自定义模态弹窗(拉动画)实例 ——
微信小程序实战类别(八)

微信小程序之侧栏分类 ——
微信小程序实战百货店连串(一)

微信小程序之仿Tmall分类入口 ——
微信小程序实战店四种类(二)

微信小程序之购物数量加减 ——
微信小程序实战市四种类(三)

微信小程序之商品性质分类 ——
微信小程序实战商号连串(四)

 

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

多谢阅览,不足之处,敬请引导

 

 

翻阅全文      

       
版权注解:本文为博主原创小说,转发务必注解出处,http://blog.csdn.net/michael\_ouyang。

相关文章