首頁 > 微信小程式 > 小程式開發 > 微信小程式中購物車的簡單實例

微信小程式中購物車的簡單實例

不言
發布: 2018-06-22 16:04:29
原創
4984 人瀏覽過

這篇文章主要介紹了微信小程序購物車簡單實例的相關資料,需要的朋友可以參考下

微信小程序,這裡實現購物車功能的小demo,有需要此功能的朋友可以參考下。

摘要: 加減商品數量,匯總價格,全選與全不選

#設計思路:

##一、從網絡上傳入以下Json資料格式的陣列1.購物車id:cid 2.標題title 3.數量num 4.圖片地址5.價格price 6.小計7.是否選取selected

#二、點選復選框toggle操作如已經選中的,經點擊變成未選中,反之而反之點擊依據index作為標識,而不用cid,方便遍歷

三、全選操作首次點擊即為全部選中,再次點擊為全不選,全選按鈕本身也跟隨toggle變換

四、點擊結算按鈕,將已選中的cid數組取出,以供通過網絡提交到服務端,這裡給個toast作為結果演示。

五、利用stepper作加減運算,同樣依據index作為標識,點完寫回num值。

六、佈局,全選與結算按鈕底部對齊,購物車商城自適應高度,類似Android的weight。

步驟:

初始資料渲染


#1.1 佈局與樣式表

上方是商品列表,下方是一個全選按鈕與立即結算按鈕

商品列表左部為商品縮圖,右上為商品標題,右下為商品價格與數量,其中商品數量使用WXStepper來實現加減操作

#js:初始化一個資料來源,這往往是從網路取得的,相關介面可參考:https://mp.weixin.qq.com/debug/wxadoc/dev/api/network-request.html

1

2

3

4

5

6

7

8

9

10

11

Page({

  data:{

    carts: [

      {cid:1008,title:'Zippo打火机',image:'https://img12.360buyimg.com/n7/jfs/t2584/348/1423193442/572601/ae464607/573d5eb3N45589898.jpg',num:'1',price:'198.0',sum:'198.0',selected:true},

      {cid:1012,title:'iPhone7 Plus',image:'https://img13.360buyimg.com/n7/jfs/t3235/100/1618018440/139400/44fd706e/57d11c33N5cd57490.jpg',num:'1',price:'7188.0',sum:'7188.0',selected:true},

      {cid:1031,title:'得力订书机',image:'https://img10.360buyimg.com/n7/jfs/t2005/172/380624319/93846/b51b5345/5604bc5eN956aa615.jpg',num:'3',price:'15.0',sum:'45.0',selected:false},

      {cid:1054,title:'康师傅妙芙蛋糕',image:'https://img14.360buyimg.com/n7/jfs/t2614/323/914471624/300618/d60b89b6/572af106Nea021684.jpg',num:'2',price:'15.2',sum:'30.4',selected:false},

      {cid:1063,title:'英雄钢笔',image:'https://img10.360buyimg.com/n7/jfs/t1636/60/1264801432/53355/bb6a3fd1/55c180ddNbe50ad4a.jpg',num:'1',price:'122.0',sum:'122.0',selected:true},

    ]

  }

})

登入後複製

佈局檔

1

2

3

4

5

6

7

8

9

10

11

12

13

14

<view class="container carts-list">

  <view wx:for="{{carts}}" class="carts-item" data-title="{{item.title}}" data-url="{{item.url}}" bindtap="bindViewTap">

    <view>

     <image class="carts-image" src="{{item.image}}" mode="aspectFill"/>

    </view>

   <view class="carts-text">

    <text class="carts-title">{{item.title}}</text>

    <view class="carts-subtitle">

     <text class="carts-price">{{item.sum}}</text>

     <text>WXStepper</text>

    </view>

   </view>

  </view>

</view>

登入後複製

樣式表

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

/*外部容器*/

.container {

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: space-between;

  box-sizing: border-box;

}

 

/*整体列表*/

.carts-list {

  display: flex;

  flex-direction: column;

  padding: 20rpx 40rpx;

}

 

/*每行单元格*/

.carts-item {

  display: flex;

  flex-direction: row;

  height:150rpx;

  /*width属性解决标题文字太短而缩略图偏移*/

  width:100%;

  border-bottom: 1px solid #eee;

  padding: 30rpx 0;

}

 

/*左部图片*/

.carts-image {

  width:150rpx;

  height:150rpx;

}

 

 

/*右部描述*/

.carts-text {

  width: 100%;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

}

 

/*右上部分标题*/

.carts-title {

  margin: 10rpx;

  font-size: 30rpx;

}

 

/*右下部分价格与数量*/

.carts-subtitle {

  font-size: 25rpx;

  color:darkgray;

  padding: 0 20rpx;

  display: flex;

  flex-direction: row;

  justify-content:space-between;

}

 

/*价格*/

.carts-price {

  color: #f60;

}

登入後複製


1.2 整合WXStepper

1.2.1 複製元件內容

[2016-10-16]

將stepper.wxss的內容複製到cart.wxss

將stepper.wxml的內容複製到cart.wxml中

與之前的單一元件不同的是:這裡要定義數組minusStatuses來與每一個加減按鈕對應。當然,合併入carts也是沒問題的。

        minusStatuses: ['disabled', 'disabled', 'normal', 'normal', 'disabled']


原來的靜態字元WXStepper換成以下的程式碼

1

2

3

4

5

6

7

8

<view class="stepper">

       <!-- 减号 -->

       <text class="{{minusStatuses[index]}}" data-index="{{index}}" bindtap="bindMinus">-</text>

       <!-- 数值 -->

       <input type="number" bindchange="bindManual" value="{{item.num}}" />

       <!-- 加号 -->

       <text class="normal" data-index="{{index}}" bindtap="bindPlus">+</text>

      </view>

登入後複製

js程式碼bindMinus、bindPlus分別改造為如下:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

bindMinus: function(e) {

    var index = parseInt(e.currentTarget.dataset.index);

    var num = this.data.carts[index].num;

    // 如果只有1件了,就不允许再减了

    if (num > 1) {

      num --;

    }

    // 只有大于一件的时候,才能normal状态,否则disable状态

    var minusStatus = num <= 1 ? &#39;disabled&#39; : &#39;normal&#39;;

    // 购物车数据

    var carts = this.data.carts;

    carts[index].num = num;

    // 按钮可用状态

    var minusStatuses = this.data.minusStatuses;

    minusStatuses[index] = minusStatus;

    // 将数值与状态写回

    this.setData({

      carts: carts,

      minusStatuses: minusStatuses

    });

  },

  bindPlus: function(e) {

    var index = parseInt(e.currentTarget.dataset.index);

    var num = this.data.carts[index].num;

    // 自增

    num ++;

    // 只有大于一件的时候,才能normal状态,否则disable状态

    var minusStatus = num <= 1 ? &#39;disabled&#39; : &#39;normal&#39;;

    // 购物车数据

    var carts = this.data.carts;

    carts[index].num = num;

    // 按钮可用状态

    var minusStatuses = this.data.minusStatuses;

    minusStatuses[index] = minusStatus;

    // 将数值与状态写回

    this.setData({

      carts: carts,

      minusStatuses: minusStatuses

    });

  },

登入後複製

效果如圖:

[2016-10-17]

修正手動改變數量儲存到陣列

1.3 整合LXCheckboxGroup

複製佈局檔程式碼到wxml,這裡要判斷已選狀態,一般購物車勾選狀態是記錄在網路的。

index值用於傳值js,遍歷之用。

1

2

3

<!-- 复选框图标 -->

   <icon wx:if="{{item.selected}}" type="success_circle" size="20" bindtap="bindCheckbox" data-index="{{index}}"/>

   <icon wx:else type="circle" size="20" bindtap="bindCheckbox" data-index="{{index}}"/>

登入後複製

複選框居中

1

2

3

4

5

/*复选框样式*/

.carts-list icon {

  margin-top: 60rpx;

  margin-right: 20rpx;

}

登入後複製

綁定點選複選框事件,對選擇狀態做反選操作。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

bindCheckbox: function(e) {

  /*绑定点击事件,将checkbox样式改变为选中与非选中*/

  //拿到下标值,以在carts作遍历指示用

  var index = parseInt(e.currentTarget.dataset.index);

  //原始的icon状态

  var selected = this.data.carts[index].selected;

  var carts = this.data.carts;

  // 对勾选状态取反

  carts[index].selected = !selected;

  // 写回经点击修改后的数组

  this.setData({

    carts: carts

  });

}

登入後複製

效果圖:


1.4 加入全選與立即結算按鈕

1.4.1 修改佈局文件,實現上述按鈕底部對齊,使用flex與固定高度來完成。

減少為3行,看是否還在最底;此外,也要保證懸浮在底部,不被列表項目的滾動而滾動。

1

2

3

4

5

6

7

8

<view class="carts-footer">

   <view bindtap="bindSelectAll">

     <icon wx:if="{{selectedAllStatus}}" type="success_circle" size="20"/>

     <icon wx:else type="circle" size="20" />

     <text>全选</text>

   </view>

   <view class="button">立即结算</view>

 </view>

登入後複製

之前用來實現,發現無論如何都不能實現全選部件與結算按鈕分散對齊,不響應如下樣式

1

2

3

display: flex;

flex-direction: row;

justify-content: space-between;

登入後複製

樣式表

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

/*底部按钮*/

.carts-footer {

  width: 100%;

  height: 80rpx;

  display: flex;

  flex-direction: row;

  justify-content: space-between;

}

 

/*复选框*/

.carts-footer icon {

  margin-left: 20rpx;

}

 

/*全选字样*/

.carts-footer text {

  font-size: 30rpx;

  margin-left: 8rpx;

  line-height: 10rpx;

}

 

/*立即结算按钮*/

.carts-footer .button {

  line-height: 80rpx;

  text-align: center;

  width:220rpx;

  height: 80rpx;

  background-color: #f60;

  color: white;

  font-size: 36rpx;

  border-radius: 0;

  border: 0;

}

登入後複製

1.4.2 全選與全不選事件

實作bindSelectAll事件,改變全選狀態

先定義一個data值,以記錄全選狀態

selectedAllStatus: false


事件實作:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

bindSelectAll: function() {

   // 环境中目前已选状态

   var selectedAllStatus = this.data.selectedAllStatus;

   // 取反操作

   selectedAllStatus = !selectedAllStatus;

   // 购物车数据,关键是处理selected值

   var carts = this.data.carts;

   // 遍历

   for (var i = 0; i < carts.length; i++) {

     carts[i].selected = selectedAllStatus;

   }

   this.setData({

     selectedAllStatus: selectedAllStatus,

     carts: carts

   });

 }

登入後複製

1.4.3 立即結算顯示目前所選的cid,以供提交到網絡,商品數量應該是包括在cid中的,後端設計應該只關注cid與uid

佈局文件也埋一下toast,js只要改變toast的顯示與否即可。

1

2

3

<toast hidden="{{toastHidden}}" bindchange="bindToastChange">

  {{toastStr}}

</toast>

登入後複製

為立即結算綁定事件bindCheckout,彈出cid彈窗

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

bindCheckout: function() {

   // 初始化toastStr字符串

   var toastStr = &#39;cid:&#39;;

   // 遍历取出已勾选的cid

   for (var i = 0; i < this.data.carts.length; i++) {

     if (this.data.carts[i].selected) {

       toastStr += this.data.carts[i].cid;

       toastStr += &#39; &#39;;

     }

   }

   //存回data

   this.setData({

     toastHidden: false,

     toastStr: toastStr

   });

 },

 bindToastChange: function() {

   this.setData({

     toastHidden: true

   });

 }

登入後複製

1.5 底部懸浮固定

1.5.1 商品列表.carts-list 加入margin-bottom: 80rpx; 以及修改上邊距為零,使得底部部件與分隔不重複出現,padding: 0 40rpx;

1.5.2 底部按鈕.carts-footer 加入background: white;

#1.5 .3 .carts-footer 加入

1

2

3

position: fixed;

bottom: 0;

border-top: 1px solid #eee;

登入後複製

1.6 總結

1.6.1 先定義一個資料來源,並在版面配置檔案中埋坑

total: ''

{{total}}

1.6.2 通用匯總函數

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

sum: function() {

    var carts = this.data.carts;

    // 计算总金额

    var total = 0;

    for (var i = 0; i < carts.length; i++) {

      if (carts[i].selected) {

        total += carts[i].num * carts[i].price;

      }

    }

    // 写回经点击修改后的数组

    this.setData({

      carts: carts,

      total: &#39;¥&#39; + total

    });

  }

登入後複製

然後分別在bindMinus bindPlus bindCheckbox bindSelectAll onLoad中呼叫this.sum()

如圖:

以上就是本文的全部內容,希望對大家的學習有所幫助,更多相關內容請關注PHP中文網!

相關推薦:

微信小程式做出外帶選單點單功能

微信小程式開發中怎樣實現電商購物車邏輯

#

以上是微信小程式中購物車的簡單實例的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板