<listing id="rruar"><tfoot id="rruar"></tfoot></listing>

<samp id="rruar"></samp>

溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×

忘記密碼？

登錄注冊(cè)×

獲取短信驗(yàn)證碼

其他方式登錄

點(diǎn)擊登錄注冊(cè) 即表示同意《億速云用戶(hù)服務(wù)條款》

用戶(hù)登錄×

賬戶(hù)密碼登錄

請(qǐng)使用微信掃描上方二維碼

使用幫助

請(qǐng)求超時(shí)！

請(qǐng)點(diǎn)擊重新獲取二維碼

小程序如何實(shí)現(xiàn)商城購(gòu)物車(chē)功能

發(fā)布時(shí)間：2022-03-15 11:39:37 來(lái)源：億速云閱讀：196 作者：小新欄目：開(kāi)發(fā)技術(shù)

這篇文章將為大家詳細(xì)講解有關(guān)小程序如何實(shí)現(xiàn)商城購(gòu)物車(chē)功能，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

布局分析：

首先一個(gè)list的主盒子，接著是item盒子，這是必須的。
然后把item分成左側(cè)的圖片部分，和右側(cè)的說(shuō)明部分（item盒子使用橫向彈性盒）
右側(cè)的說(shuō)明部分又分上下2部分（右側(cè)說(shuō)明部分盒子使用縱向彈性盒）
下面價(jià)錢(qián)購(gòu)物車(chē)部分（下面價(jià)錢(qián)購(gòu)物車(chē)部分也使用橫向彈性盒，中間使用justify-content: space-between;填充空白）

index.wxml：

<!--主盒子--> 
<view class="container"> 
<!--head--> 
<view class="tit"> 
<view class="title_val">商品列表</view> 
<view class="more">更多</view> 
</view> 
<!--list--> 
<view class="goodslist"> 
<!--item--> 
<block wx:for="{{goodslist}}"> 
<view class="goods"> 
<!--左側(cè)圖片盒子--> 
<view> 
<img class="good-img" src="{{item.imgUrl}}" /> 
</view> 
<!--右側(cè)說(shuō)明部分--> 
<view class="good-cont"> 
<!--上--文字說(shuō)明--> 
<view class="goods-navigator"> 
<text class="good-name">{{item.name}}</text> 
</view> 
<!--下--價(jià)格部分--> 
<view class="good-price"> 
<text>￥{{item.price}}</text> 
<img bindtap="addcart" class="cart" id="{{item.id}}" src="/images/new_73.jpg" /> 
</view> 
</view> 
</view> 
</block> 
</view> 
</view>

index.wxss：

<code class="language-text">[css] view plain copy
/**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:&#39;&#39;;  
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;  
}  
</code>

index.js：

數(shù)據(jù)部分，一般情況都是訪(fǎng)問(wèn)接口獲取數(shù)據(jù)的，這里并沒(méi)有使用網(wǎng)絡(luò)訪(fǎng)問(wèn)，為了簡(jiǎn)化demo，直接把一組數(shù)據(jù)放在data對(duì)象中。同學(xué)們可以根據(jù)其數(shù)據(jù)結(jié)構(gòu)自己編寫(xiě)后臺(tái)接口。

<code class="language-text">[javascript] view plain copy
Page({  
   data: {  
       goodslist: [  
           {  
               id:&quot;001&quot;,  
               imgUrl:&quot;https://img5.imgtn.bdimg.com/it/u=2906541843,1492984080&amp;fm=23&amp;gp=0.jpg&quot;,  
               name:&quot;女裝T恤中長(zhǎng)款大碼擺裙春夏新款&quot;,  
               price:&quot;65.00&quot; 
           },  
           {  
               id:&quot;002&quot;,  
               imgUrl:&quot;https://img4.imgtn.bdimg.com/it/u=1004404590,1607956492&amp;fm=23&amp;gp=0.jpg&quot;,  
               name:&quot;火亮春秋季 男青年修身款圓領(lǐng)男士T恤&quot;,  
               price:&quot;68.00&quot; 
           },  
           {  
               id:&quot;003&quot;,  
               imgUrl:&quot;https://img1.imgtn.bdimg.com/it/u=2305064940,3470659889&amp;fm=23&amp;gp=0.jpg&quot;,  
               name:&quot;新款立體掛脖t恤女短袖大碼寬松條紋V領(lǐng)上衣顯瘦休閑春夏&quot;,  
               price:&quot;86.00&quot; 
           },  
           {  
               id:&quot;004&quot;,  
               imgUrl:&quot;https://img4.imgtn.bdimg.com/it/u=3986819380,1610061022&amp;fm=23&amp;gp=0.jpg&quot;,  
               name:&quot;男運(yùn)動(dòng)上衣春季上新品 上衣流行裝青年&quot;,  
               price:&quot;119.00&quot; 
           },  
           {  
               id:&quot;005&quot;,  
               imgUrl:&quot;https://img1.imgtn.bdimg.com/it/u=3583238552,3525141111&amp;fm=23&amp;gp=0.jpg&quot;,  
               name:&quot;時(shí)尚字母三角露胸t恤女裝亮絲大碼寬松不規(guī)則春夏潮&quot;,  
               price:&quot;69.00&quot; 
           },  
           {  
               id:&quot;006&quot;,  
               imgUrl:&quot;https://img2.imgtn.bdimg.com/it/u=1167272381,3361826143&amp;fm=23&amp;gp=0.jpg&quot;,  
               name:&quot;新款立體掛脖t恤短袖大碼寬松條紋V領(lǐng)上衣顯瘦休閑春夏&quot;,  
               price:&quot;86.00&quot; 
           },  
           {  
               id:&quot;007&quot;,  
               imgUrl:&quot;https://img0.imgtn.bdimg.com/it/u=789486313,2033571593&amp;fm=23&amp;gp=0.jpg&quot;,  
               name:&quot;時(shí)尚字母三角露胸t恤女裝亮絲大碼寬松不規(guī)則春夏潮&quot;,  
               price:&quot;119.00&quot; 
           },  
           {  
               id:&quot;008&quot;,  
               imgUrl:&quot;https://img2.imgtn.bdimg.com/it/u=3314044863,3966877419&amp;fm=23&amp;gp=0.jpg&quot;,  
               name:&quot;男運(yùn)動(dòng)上衣春季上新品 上衣流行裝青年&quot;,  
               price:&quot;69.00&quot; 
           },  
       ]  
   },  
// 加入購(gòu)物車(chē) 
   addcart:function(e){  
this.setData({  
           toastHidden:false 
       });  
// 遍歷列表 與 購(gòu)物車(chē)列表 
for (var i in this.data.goodslist){  
// 列表中某一項(xiàng)item的id == 點(diǎn)擊事件傳遞過(guò)來(lái)的id。則是被點(diǎn)擊的項(xiàng) 
if(this.data.goodslist[i].id == e.target.id){  
// 給goodsList數(shù)組的當(dāng)前項(xiàng)添加count元素，值為1，用于記錄添加到購(gòu)物車(chē)的數(shù)量 
this.data.goodslist[i].count = 1;  
// 獲取購(gòu)物車(chē)的緩存數(shù)組（沒(méi)有數(shù)據(jù)，則賦予一個(gè)空數(shù)組） 
var arr = wx.getStorageSync(&#39;cart&#39;) || [];  
// 如果購(gòu)物車(chē)有數(shù)據(jù) 
if(arr.length&gt;0){  
// 遍歷購(gòu)物車(chē)數(shù)組 
for(var j in arr){  
// 判斷購(gòu)物車(chē)內(nèi)的item的id，和事件傳遞過(guò)來(lái)的id，是否相等 
if(arr[j].id == e.target.id){  
// 相等的話(huà)，給count+1（即再次添加入購(gòu)物車(chē)，數(shù)量+1） 
                           arr[j].count = arr[j].count + 1;  
// 最后，把購(gòu)物車(chē)數(shù)據(jù)，存放入緩存（此處不用再給購(gòu)物車(chē)數(shù)組push元素進(jìn)去，因?yàn)檫@個(gè)是購(gòu)物車(chē)有的，直接更新當(dāng)前數(shù)組即可） 
try {  
                               wx.setStorageSync(&#39;cart&#39;, arr)  
                           } catch (e) {  
                               console.log(e)  
                           }  
// 返回（在if內(nèi)使用return，跳出循環(huán)節(jié)約運(yùn)算，節(jié)約性能） 
return;  
                       }  
                   }  
// 遍歷完購(gòu)物車(chē)后，沒(méi)有對(duì)應(yīng)的item項(xiàng)，把goodslist的當(dāng)前項(xiàng)放入購(gòu)物車(chē)數(shù)組 
                   arr.push(this.data.goodslist[i]);  
               }  
// 購(gòu)物車(chē)沒(méi)有數(shù)據(jù)，把item項(xiàng)push放入當(dāng)前數(shù)據(jù)（第一次存放時(shí)） 
else{  
                   arr.push(this.data.goodslist[i]);  
               }  
// 最后，把購(gòu)物車(chē)數(shù)據(jù)，存放入緩存 
try {  
                   wx.setStorageSync(&#39;cart&#39;, arr)  
// 返回（在if內(nèi)使用return，跳出循環(huán)節(jié)約運(yùn)算，節(jié)約性能） 
return;  
               } catch (e) {  
                   console.log(e)  
               }  
           }  
       }  
   }  
})  
</code>

編寫(xiě)購(gòu)物車(chē)部分，如下圖所示：

布局分析：

首先一個(gè)list的主盒子，接著是item盒子，這是必須的。

然后把item分成左側(cè)的圖片部分，和右側(cè)的說(shuō)明部分（item盒子使用橫向彈性盒）

右側(cè)的說(shuō)明部分又分上下2部分（右側(cè)說(shuō)明部分盒子使用縱向彈性盒）

下面價(jià)錢(qián)、購(gòu)物加減、購(gòu)物車(chē)部分（使用縱向彈性盒）

最下面的購(gòu)物加減、購(gòu)物車(chē)部分（使用橫向彈性盒，中間使用justify-content: space-between;填充空白）

cart.wxml：

<code class="language-text">[html] view plain copy
<!--要是夠車(chē)內(nèi)沒(méi)有數(shù)據(jù)，就行顯示沒(méi)有數(shù)據(jù)--> 
<view class="cart" hidden="{{iscart}}"> 
<img src="/images/cart.png" /> 
<view>購(gòu)物車(chē)什么都沒(méi)有，趕快去購(gòu)物吧</view> 
</view> 
<!--要是有數(shù)據(jù)，就顯示數(shù)據(jù)--> 
<view class="cartList" hidden="{{!iscart}}"> 
<!--header--> 
<view class="baoyou"></view> 
<!--list item--> 
<block wx:for="{{cart}}"> 
<view class="goods"> 
<!--左側(cè)圖片--> 
<view> 
<img class="good-img" src="{{item.imgUrl}}" /> 
</view> 
<!--右側(cè)說(shuō)明部分--> 
<view class="good-cont"> 
<!--文字說(shuō)明--> 
<view class="goods-navigator"> 
<text class="good-name">{{item.name}}</text> 
</view> 
<!--價(jià)錢(qián)和購(gòu)物加減的父盒子--> 
<view class="good-price"> 
<text class="price">￥{{item.price}}</text> 
<view class="btn-box"> 
<view class="btn"><button bindtap="delCount" id="del{{index}}" size="mini" type="default">-</button> 
<input value="{{item.count}}" /><button bindtap="addCount" id="add{{index}}" size="mini" type="default">+</button> 
</view> 
<img bindtap="delGoods" id="img{{index}}" src="/images/del2.png" /> 
</view> 
</view> 
</view> 
</view> 
</block> 
<!--footer--> 
<view class="total"> 
<view class="total_text">合計(jì)：<text>￥{{total}}</text></view><button class="total_js" size="mini">去結(jié)算({{goodsCount}})</button> 
</view> 
</view> 
</code>

cart.wxss：

<code class="language-text">[css] view plain copy
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;  
}  
</code></pre>
</p>
<p>cart.js：</p>
<p class="highlight">
<pre>
<code class="language-text">[html] view plain copy
Page({  
   data: {  
       iscart: false,  
       cart: [], //數(shù)據(jù)  
       count: 1,   //商品數(shù)量默認(rèn)是1  
       total: 0,    //總金額  
       goodsCount: 0 //數(shù)量  
   },  
   onLoad: function (options) {  

   },  
   onShow: function () {  
       var that = this;  
       // 獲取產(chǎn)品展示頁(yè)保存的緩存數(shù)據(jù)（購(gòu)物車(chē)的緩存數(shù)組，沒(méi)有數(shù)據(jù)，則賦予一個(gè)空數(shù)組）  
       var arr = wx.getStorageSync(&#39;cart&#39;) || [];  
       // 有數(shù)據(jù)的話(huà)，就遍歷數(shù)據(jù)，計(jì)算總金額 和 總數(shù)量  
       if (arr.length &gt; 0) {  
           for (var i in arr) {  
               that.data.total += Number(arr[i].price) * Number(arr[i].count);  
               that.data.goodsCount += Number(arr[i].count);  
           }  
           // 更新數(shù)據(jù)  
           this.setData({  
               iscart: true,  
               cart: arr,  
               total: that.data.total,  
               goodsCount: that.data.goodsCount  
           });  
       }  
   },  
   onHide: function(){  
       // 清除數(shù)據(jù)  
       this.setData({  
           iscart: false,  
           cart: [], //數(shù)據(jù)  
           total: 0,    //總金額  
           goodsCount: 0 //數(shù)量  
       });  
   },  
   /* 減數(shù) */  
   delCount: function (e) {  
       console.log(e)  
       // 獲取購(gòu)物車(chē)該商品的數(shù)量  
       // [獲取設(shè)置在該btn的id,即list的index值]  
       if (this.data.cart[e.target.id.substring(3)].count &lt;= 1) {  
           return;  
       }  
       // 商品總數(shù)量-1  
       this.data.goodsCount -= 1;  
       // 總價(jià)錢(qián) 減去 對(duì)應(yīng)項(xiàng)的價(jià)錢(qián)單價(jià)  
       this.data.total -= Number(this.data.cart[e.target.id.substring(3)].price);  
       // 購(gòu)物車(chē)主體數(shù)據(jù)對(duì)應(yīng)的項(xiàng)的數(shù)量-1  并賦給主體數(shù)據(jù)對(duì)應(yīng)的項(xiàng)內(nèi)  
       this.data.cart[e.target.id.substring(3)].count = --this.data.cart[e.target.id.substring(3)].count;  
       // 更新data數(shù)據(jù)對(duì)象  
       this.setData({  
           cart: this.data.cart,  
           total: this.data.total,  
           goodsCount: this.data.goodsCount  
       })  
       // 主體數(shù)據(jù)重新賦入緩存內(nèi)  
       try {  
           wx.setStorageSync(&#39;cart&#39;, this.data.cart)  
       } catch (e) {  
           console.log(e)  
       }  
   },  
   /* 加數(shù) */  
   addCount: function (e) {  
       // 商品總數(shù)量+1  
       this.data.goodsCount += 1;  
       // 總價(jià)錢(qián) 加上 對(duì)應(yīng)項(xiàng)的價(jià)錢(qián)單價(jià)  
       this.data.total += Number(this.data.cart[e.target.id.substring(3)].price);  
       // 購(gòu)物車(chē)主體數(shù)據(jù)對(duì)應(yīng)的項(xiàng)的數(shù)量+1  并賦給主體數(shù)據(jù)對(duì)應(yīng)的項(xiàng)內(nèi)  
       this.data.cart[e.target.id.substring(3)].count = ++this.data.cart[e.target.id.substring(3)].count;  
       // 更新data數(shù)據(jù)對(duì)象  
       this.setData({  
           cart: this.data.cart,  
           total: this.data.total,  
           goodsCount: this.data.goodsCount  
       })  
       // 主體數(shù)據(jù)重新賦入緩存內(nèi)  
       try {  
           wx.setStorageSync(&#39;cart&#39;, this.data.cart)  
       } catch (e) {  
           console.log(e)  
       }  
   },  
   /* 刪除item */  
   delGoods: function (e) {  
       // 商品總數(shù)量  減去  對(duì)應(yīng)刪除項(xiàng)的數(shù)量  
this.data.goodsCount = this.data.goodsCount - this.data.cart[e.target.id.substring(3)].count;  
       // 總價(jià)錢(qián)  減去  對(duì)應(yīng)刪除項(xiàng)的單價(jià)*數(shù)量  
       this.data.total -= this.data.cart[e.target.id.substring(3)].price * this.data.cart[e.target.id.substring(3)].count;  
       // 主體數(shù)據(jù)的數(shù)組移除該項(xiàng)  
       this.data.cart.splice(e.target.id.substring(3), 1);  
       // 更新data數(shù)據(jù)對(duì)象  
       this.setData({  
           cart: this.data.cart,  
           total: this.data.total,  
           goodsCount: this.data.goodsCount  
       })  
       // 主體數(shù)據(jù)重新賦入緩存內(nèi)  
       try {  
           wx.setStorageSync(&#39;cart&#39;, this.data.cart)  
       } catch (e) {  
           console.log(e)  
       }  
   }  
})  
</code>

關(guān)于“小程序如何實(shí)現(xiàn)商城購(gòu)物車(chē)功能”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。

向AI問(wèn)一下細(xì)節(jié)

推薦閱讀：

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

上一篇新聞：
laravel中ioc控制反轉(zhuǎn)指的是什么
下一篇新聞：
CSS選擇器類(lèi)型有哪些

猜你喜歡

AI
助
手

產(chǎn)品服務(wù)

地區(qū)劃分

專(zhuān)題活動(dòng)

幫助支持

關(guān)于我們

售后咨詢(xún)

7*24小時(shí)在線(xiàn)電話(huà)：400-100-2938

7*24小時(shí)在線(xiàn) QQ：800811969

關(guān)注億速云

億速云公眾號(hào)

手機(jī)網(wǎng)站二維碼