【移動(dòng)應(yīng)用開(kāi)發(fā)技術(shù)】微信小程序之購(gòu)物車功能怎么弄

【移動(dòng)應(yīng)用開(kāi)發(fā)技術(shù)】微信小程序之購(gòu)物車功能怎么弄

這篇文章給大家分享的是有關(guān)微信小程序之購(gòu)物車功能怎么弄的內(nèi)容。在下覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨在下過(guò)來(lái)看看吧。前言以往的購(gòu)物車，基本都是通過(guò)大量的DOM操作來(lái)實(shí)現(xiàn)。微信小程序其實(shí)跟vue.js的用法非常像，接下來(lái)就看看小程序可以怎樣實(shí)現(xiàn)購(gòu)物車功能。需求先來(lái)弄清楚購(gòu)物車的需求。單選、全選和取消，而且會(huì)隨著選中的商品計(jì)算出總價(jià)單個(gè)商品購(gòu)買數(shù)量的增加和減少刪除商品。當(dāng)購(gòu)物車為空時(shí)，頁(yè)面會(huì)變?yōu)榭召?gòu)物車的布局根據(jù)設(shè)計(jì)圖，我們可以先實(shí)現(xiàn)靜態(tài)頁(yè)面。接下來(lái)，再看看一個(gè)購(gòu)物車需要什么樣的數(shù)據(jù)。首先是一個(gè)商品列表(carts)，列表里的單品需要：商品圖(image)，商品名(title)，單價(jià)(price)，數(shù)量(num)，是否選中(selected)，商品id(id)然后左下角的全選，需要一個(gè)字段(selectAllStatus)表示是否全選了右下角的總價(jià)(totalPrice)最后需要知道購(gòu)物車是否為空(hasList)知道了需要這些數(shù)據(jù)，在頁(yè)面初始化的時(shí)候我們先定義好這些。代碼實(shí)現(xiàn)初始化Page({

data:

{

carts:[],

//

購(gòu)物車列表

hasList:false,

//

列表是否有數(shù)據(jù)

totalPrice:0,

//

總價(jià)，初始為0

selectAllStatus:true

//

全選狀態(tài)，默認(rèn)全選

},

onShow()

{

this.setData({

hasList:

true,

//

既然有數(shù)據(jù)了，那設(shè)為true吧

carts:[

{id:1,title:'新鮮芹菜

半斤',image:'/image/s5.png',num:4,price:0.01,selected:true},

{id:2,title:'素米

500g',image:'/image/s6.png',num:1,price:0.03,selected:true}

]

});

},

})購(gòu)物車列表數(shù)據(jù)我們一般是通過(guò)請(qǐng)求服務(wù)器拿到的數(shù)據(jù)，所以我們放在生命周期函數(shù)里給carts賦值。想到每次進(jìn)到購(gòu)物車都要獲取購(gòu)物車的最新?tīng)顟B(tài)，而onLoad和onReady只在初始化的時(shí)候執(zhí)行一次，所以我需要把請(qǐng)求放在onShow函數(shù)里。(這里先拿點(diǎn)假數(shù)據(jù)冒充一下吧)布局wxml修好之前寫(xiě)好的靜態(tài)頁(yè)面，綁定數(shù)據(jù)。

<view

class="cart-box">

<!--

wx:for

渲染購(gòu)物車列表

-->

<view

wx:for="{{carts}}">

<!--

wx:if

是否選擇顯示不同圖標(biāo)

-->

<icon

wx:if="{{item.selected}}"

type="success"

color="red"

bindtap="selectList"

data-index="{{index}}"

/>

<icon

wx:else

type="circle"

bindtap="selectList"

data-index="{{index}}"/>

<!--

點(diǎn)擊商品圖片可跳轉(zhuǎn)到商品詳情

-->

<navigator

url="../details/details?id={{item.id}}">

<image

class="cart-thumb"

src="{{item.image}}"></image>

</navigator>

<text>{{item.title}}</text>

<text>￥{{item.price}}</text>

<!--

增加減少數(shù)量按鈕

-->

<view>

<text

bindtap="minusCount"

data-index="{{index}}">-</text>

<text>{{item.num}}</text>

<text

bindtap="addCount"

data-index="{{index}}">+</text>

</view>

<!--

刪除按鈕

-->

<text

bindtap="deleteList"

data-index="{{index}}">

×

</text>

</view>

</view>

<!--

底部操作欄

-->

<view>

<!--

wx:if

是否全選顯示不同圖標(biāo)

-->

<icon

wx:if="{{selectAllStatus}}"

type="success_circle"

color="#fff"

bindtap="selectAll"/>

<icon

wx:else

type="circle"

color="#fff"

bindtap="selectAll"/>

<text>全選</text>

<!--

總價(jià)

-->

<text>￥{{totalPrice}}</text>

</view>計(jì)算總價(jià)總價(jià)=選中的商品1的價(jià)格*數(shù)量+選中的商品2的價(jià)格*數(shù)量+...根據(jù)公式，可以得到getTotalPrice()

{

let

carts

=

this.data.carts;

//

獲取購(gòu)物車列表

let

total

=

0;

for(let

i

=

0;

i<carts.length;

i++)

{

//

循環(huán)列表得到每個(gè)數(shù)據(jù)

if(carts[i].selected)

{

//

判斷選中才會(huì)計(jì)算價(jià)格

total

+=

carts[i].num

*

carts[i].price;

//

所有價(jià)格加起來(lái)

}

}

this.setData({

//

最后賦值到data中渲染到頁(yè)面

carts:

carts,

totalPrice:

total.toFixed(2)

});

}頁(yè)面中的其他操作會(huì)導(dǎo)致總價(jià)格變化的都需要調(diào)用該方法。選擇事件點(diǎn)擊時(shí)選中，再點(diǎn)擊又變成沒(méi)選中狀態(tài)，其實(shí)就是改變selected字段。通過(guò)data-index="{{index}}"把當(dāng)前商品在列表數(shù)組中的下標(biāo)傳給事件。selectList(e){

constindex=e.currentTarget.dataset.index;

//獲取data-傳進(jìn)來(lái)的index

letcarts=this.data.carts;

//獲取購(gòu)物車列表

constselected=carts[index].selected;

//獲取當(dāng)前商品的選中狀態(tài)

carts[index].selected=!selected;

//改變狀態(tài)

this.setData({

carts:carts

});

this.getTotalPrice();

//重新獲取總價(jià)}selectList(e){

constindex=e.currentTarget.dataset.index;

//獲取data-傳進(jìn)來(lái)的index

letcarts=this.data.carts;

//獲取購(gòu)物車列表

constselected=carts[index].selected;

//獲取當(dāng)前商品的選中狀態(tài)

carts[index].selected=!selected;

//改變狀態(tài)

this.setData({

carts:carts

});

this.getTotalPrice();

//重新獲取總價(jià)}全選事件全選就是根據(jù)全選狀態(tài)selectAllStatus去改變每個(gè)商品的selectedselectAll(e){

letselectAllStatus=this.data.selectAllStatus;

//是否全選狀態(tài)

selectAllStatus=!selectAllStatus;

letcarts=this.data.carts;

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

carts[i].selected=selectAllStatus;

//改變所有商品狀態(tài)

}

this.setData({

selectAllStatus:selectAllStatus,

carts:carts

});

this.getTotalPrice();

//重新獲取總價(jià)}selectAll(e){

letselectAllStatus=this.data.selectAllStatus;

//是否全選狀態(tài)

selectAllStatus=!selectAllStatus;

letcarts=this.data.carts;

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

carts[i].selected=selectAllStatus;

//改變所有商品狀態(tài)

}

this.setData({

selectAllStatus:selectAllStatus,

carts:carts

});

this.getTotalPrice();

//重新獲取總價(jià)}增減數(shù)量點(diǎn)擊+號(hào)，num加1，點(diǎn)擊-號(hào)，如果num>1，則減1//增加數(shù)量addCount(e){

constindex=e.currentTarget.dataset.index;

letcarts=this.data.carts;

letnum=carts[index].num;

num=num+1;

carts[index].num=num;

this.setData({

carts:carts

});

this.getTotalPrice();},//減少數(shù)量minusCount(e){

constindex=e.currentTarget.dataset.index;

letcarts=this.data.carts;

letnum=carts[index].num;

if(num<=1){

returnfalse;

}

num=num-1;

carts[index].num=num;

this.setData({

carts:carts

});

this.getTotalPrice();}//增加數(shù)量addCount(e){

constindex=e.currentTarget.dataset.index;

letcarts=this.data.carts;

letnum=carts[index].num;

num=num+1;

carts[index].num=num;

this.setData({

carts:carts

});

this.getTotalPrice();},//減少數(shù)量minusCount(e){

constindex=e.currentTarget.dataset.index;

letcarts=this.data.carts;

letnum=carts[index].num;

if(num<=1){

returnfalse;

}

num=num-1;

carts[index].num=num;

this.setData({

carts:carts

});