在微信小程序中怎么實(shí)現(xiàn)一個(gè)購(gòu)物車功能？針對(duì)這個(gè)問(wèn)題，這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問(wèn)題的小伙伴找到更簡(jiǎn)單易行的方法。

創(chuàng)新互聯(lián)公司擁有十余年成都網(wǎng)站建設(shè)工作經(jīng)驗(yàn),為各大企業(yè)提供成都網(wǎng)站制作、成都網(wǎng)站建設(shè)服務(wù)，對(duì)于網(wǎng)頁(yè)設(shè)計(jì)、PC網(wǎng)站建設(shè)（電腦版網(wǎng)站建設(shè)）、成都app軟件開(kāi)發(fā)公司、wap網(wǎng)站建設(shè)（手機(jī)版網(wǎng)站建設(shè)）、程序開(kāi)發(fā)、網(wǎng)站優(yōu)化（SEO優(yōu)化）、微網(wǎng)站、域名注冊(cè)等，憑借多年來(lái)在互聯(lián)網(wǎng)的打拼，我們?cè)诨ヂ?lián)網(wǎng)網(wǎng)站建設(shè)行業(yè)積累了很多網(wǎng)站制作、網(wǎng)站設(shè)計(jì)、網(wǎng)絡(luò)營(yíng)銷經(jīng)驗(yàn)，集策劃、開(kāi)發(fā)、設(shè)計(jì)、營(yíng)銷、管理等網(wǎng)站化運(yùn)作于一體，具備承接各種規(guī)模類型的網(wǎng)站建設(shè)項(xiàng)目的能力。

功能描述

1、可單選，全選/取消全選
2、增加、減少、手動(dòng)編輯商品的數(shù)量
3、根據(jù)商品的數(shù)量統(tǒng)計(jì)價(jià)格

代碼實(shí)現(xiàn)

此處省略一萬(wàn)字，廢話不多說(shuō)，直接上代碼吧！

WXML靜態(tài)布局、綁定“死”數(shù)據(jù)（主要功能代碼）

<view class="list">
 <block wx:for="{{dataArr}}" wx:key="index" wx:for-item="item">
  <view class="li clearfix">
  <!-- 單品選擇按鈕 -->
  <view class="check" wx:if="{{item.selected}}" bindtap="selectList" data-index="{{index}}"><text class="iconfont icon-dagou"></text></view>
  <view class="check" wx:else bindtap="selectList" data-index="{{index}}"><text class="iconfont icon-choose"></text></view>
 
  <view class="img fl"><image src="{{item.image}}" mode="aspectFill"></image></view>
  <view class="right fr">
   <view class="title ellipsis-2">{{item.title}}</view>
 
   <!-- 增加減少編輯數(shù)量 -->
   <view class="num_w clearfix">
   <view class="fl" bindtap="minusCount" data-index="{{index}}">-</view>
   <view class="fl num"><input type="number" value="{{item.num}}" bindinput="inputCount" bindblur="bindblur" data-index="{{index}}" /></view>
   <view class="fl" bindtap="addCount" data-index="{{index}}">+</view>
   </view>
 
   <view class="price">￥{{item.price}}</view>
  </view>
  </view>
 </block>
 </view>
 <view class="bottom clearfix">
 <!-- 全選/取消全選按鈕 -->
 <view class="check fl">
  <text class="iconfont icon-dagou" wx:if="{{selectAllStatus}}" bindtap="selectAll"></text>
  <text class="iconfont icon-choose" wx:else bindtap="selectAll"></text>
  <text class="text">全選</text>
 </view>
 
 <view class="button gradientButton fr"><button bindtap="toOrder">去結(jié)算</button></view>
 
 <!-- 總價(jià) -->
 <view class="price fr">合計(jì)：<text>￥{{totalPrice}}</text></view>
</view>

WXSS：樣式有點(diǎn)多，就不放上來(lái)啦，需要的可以留下你的郵箱地址哦

JS：

當(dāng)頁(yè)面剛加載進(jìn)來(lái)，當(dāng)然要先onShow一下，默認(rèn)全選，統(tǒng)計(jì)購(gòu)物車?yán)锼猩唐返膬r(jià)格。PS：這里建議用onShow，因?yàn)槊看芜M(jìn)入購(gòu)物車都需要重新加載數(shù)據(jù)，而onLoad和onReady只在初始化的時(shí)候執(zhí)行一次。

onShow() {
 this.getTotalPrice();
}

統(tǒng)計(jì)總價(jià)（該頁(yè)面還有其它地方需要調(diào)用到這個(gè)方法）

// 統(tǒng)計(jì)總價(jià)
getTotalPrice() {
 // 獲取購(gòu)物車列表
 let dataArr = this.data.dataArr;
 let total = 0;
 // 循環(huán)列表
 for(let i = 0; i<dataArr.length; i++) {
 // 判斷選中才會(huì)計(jì)算價(jià)格
 if(dataArr[i].selected) {
  // 所有價(jià)格加起來(lái)
  total += dataArr[i].num * dataArr[i].price;
 }
 }
 // 賦值到data中渲染到頁(yè)面
 this.setData({ 
 dataArr: dataArr,
 totalPrice: total.toFixed(2)
 });
}

選擇商品（單選），通過(guò) data-index="{{index}}" 把當(dāng)前商品在列表數(shù)組中的下標(biāo)傳給事件，在更改單個(gè)商品的狀態(tài)時(shí)，也要注意全選的狀態(tài)，還有重新統(tǒng)計(jì)總價(jià)。

// 選擇事件
selectList(e) {
 // 獲取data- 傳進(jìn)來(lái)的index
 let index = e.currentTarget.dataset.index;
 // 獲取購(gòu)物車列表
 let dataArr = this.data.dataArr;
 // 獲取當(dāng)前商品的選中狀態(tài)
 let selected = dataArr[index].selected;
 // 改變狀態(tài)
 dataArr[index].selected = !selected;
 this.setData({
 dataArr: dataArr
 });
 
 // 改變?nèi)x狀態(tài)
 for (var i=0; i<this.data.dataArr.length; i++){
 // 當(dāng)狀態(tài)為全選時(shí)，每個(gè)元素其中有一個(gè)為false，則取消全選
 // 當(dāng)狀態(tài)為非全選時(shí)，每個(gè)元素都為true，則全選
 if(this.data.selectAllStatus){
  if(!this.data.dataArr[i].selected){
  this.setData({
   selectAllStatus: false
  });
  break;
  }
 }else {
  if(this.data.dataArr[i].selected){
  this.setData({
   selectAllStatus: true
  });
  }else {
  this.setData({
   selectAllStatus: false
  });
  break;
  }
 }
 }
 
 // 重新統(tǒng)計(jì)總價(jià)
 this.getTotalPrice();
}

商品全選/取消全選，該狀態(tài)更改之后也要重新統(tǒng)計(jì)總價(jià)哦，包括后面的，我就不再提示了

// 全選事件
selectAll(e) {
 // 是否全選狀態(tài)
 let selectAllStatus = this.data.selectAllStatus;
 selectAllStatus = !selectAllStatus;
 let dataArr = this.data.dataArr;
 for (let i = 0; i < dataArr.length; i++) {
 // 改變所有商品狀態(tài)
 dataArr[i].selected = selectAllStatus;
 }
 this.setData({
 selectAllStatus: selectAllStatus,
 dataArr: dataArr
 });
 // 重新統(tǒng)計(jì)總價(jià)
 this.getTotalPrice();
}

另外，還有增加或減少數(shù)量的方法。

溫馨提示：減少數(shù)量時(shí)注意不能少于1（參考某寶商城的做法）

// 增加數(shù)量
addCount(e) {
 let index = e.currentTarget.dataset.index;
 let dataArr = this.data.dataArr;
 let num = dataArr[index].num;
 num = num + 1;
 dataArr[index].num = num;
 this.setData({
 dataArr: dataArr
 });
 // 重新統(tǒng)計(jì)總價(jià)
 this.getTotalPrice();
},
 
// 減少數(shù)量
minusCount(e) {
 let index = e.currentTarget.dataset.index;
 let dataArr = this.data.dataArr;
 let num = dataArr[index].num;
 if(num <= 1){
 wx.showToast({
  title: '寶貝不能再減少啦',
  icon: 'none'
 })
 return false;
 }
 num = num - 1;
 dataArr[index].num = num;
 this.setData({
 dataArr: dataArr
 });
 // 重新統(tǒng)計(jì)總價(jià)
 this.getTotalPrice();
}

然后，還有手動(dòng)輸入數(shù)量的方法

// 輸入數(shù)量
inputCount(e) {
 let index = e.currentTarget.dataset.index;
 let dataArr = this.data.dataArr;
 let num = e.detail.value;
 dataArr[index].num = num;
 this.setData({
 dataArr: dataArr
 });
 // 重新統(tǒng)計(jì)總價(jià)
 this.getTotalPrice();
}

別忘了，手動(dòng)輸入數(shù)量也要有不能少于1的判斷哦，我這里是在input失去焦點(diǎn)時(shí)做的判斷，當(dāng)然也是參考某寶商城的做法

// 失去焦點(diǎn)時(shí)判斷數(shù)量是否小于1
bindblur(e) {
 let index = e.currentTarget.dataset.index;
 let dataArr = this.data.dataArr;
 let num = e.detail.value;
 if(num < 1){
 wx.showToast({
  title: '數(shù)量不能小于1',
  icon: 'none'
 })
 num = 1;
 dataArr[index].num = num;
 this.setData({
  dataArr: dataArr
 });
 // 重新統(tǒng)計(jì)總價(jià)
 this.getTotalPrice();
 }
}

最后，就是去結(jié)算了，在處理完一堆噼里啪啦的業(yè)務(wù)之后，跳轉(zhuǎn)到結(jié)算頁(yè)面

// 去結(jié)算
toOrder() {
 // 處理數(shù)據(jù)
 // *****
 // Author: Moss
 // QQ: 827291427
 // *****
 
 // 跳轉(zhuǎn)結(jié)算頁(yè)面
 wx.navigateTo({
 url: '/pages/shop/order/order'
 })
}

關(guān)于在微信小程序中怎么實(shí)現(xiàn)一個(gè)購(gòu)物車功能問(wèn)題的解答就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，如果你還有很多疑惑沒(méi)有解開(kāi)，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道了解更多相關(guān)知識(shí)。

本文名稱：在微信小程序中怎么實(shí)現(xiàn)一個(gè)購(gòu)物車功能-創(chuàng)新互聯(lián)
當(dāng)前網(wǎng)址：http://aaarwkj.com/article38/ipgpp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供做網(wǎng)站、軟件開(kāi)發(fā)、虛擬主機(jī)、外貿(mào)網(wǎng)站建設(shè)、搜索引擎優(yōu)化、網(wǎng)頁(yè)設(shè)計(jì)公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)