這篇文章主要介紹了微信小程序購物車簡單實例的相關資料,需要的朋友可以參考下
微信小程序,這裡實現購物車功能的小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 : 20 rpx 40 rpx;
}
.carts-item {
display : flex;
flex- direction : row;
height : 150 rpx;
width : 100% ;
border-bottom : 1px solid #eee ;
padding : 30 rpx 0 ;
}
.carts-image {
width : 150 rpx;
height : 150 rpx;
}
.carts-text {
width : 100% ;
display : flex;
flex- direction : column;
justify- content : space-between;
}
.carts-title {
margin : 10 rpx;
font-size : 30 rpx;
}
.carts-subtitle {
font-size : 25 rpx;
color :darkgray;
padding : 0 20 rpx;
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;
if (num > 1) {
num --;
}
var minusStatus = num <= 1 ? & #39;disabled' : 'normal';
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 ++;
var minusStatus = num <= 1 ? & #39;disabled' : 'normal';
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) {
var index = parseInt(e.currentTarget.dataset.index);
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;
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 () {
var toastStr = & #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; ';
}
}
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;¥' + total
});
}
|
登入後複製
然後分別在bindMinus bindPlus bindCheckbox bindSelectAll onLoad中呼叫this.sum()
如圖:
以上就是本文的全部內容,希望對大家的學習有所幫助,更多相關內容請關注PHP中文網!
相關推薦:
微信小程式做出外帶選單點單功能
微信小程式開發中怎樣實現電商購物車邏輯
#
以上是微信小程式中購物車的簡單實例的詳細內容。更多資訊請關注PHP中文網其他相關文章!