您好,登錄后才能下訂單哦!
這篇文章給大家分享的是有關(guān)微信小程序中如何實(shí)現(xiàn)購(gòu)物車(chē)的內(nèi)容。小編覺(jué)得挺實(shí)用的,因此分享給大家做個(gè)參考,一起跟隨小編過(guò)來(lái)看看吧。
先上效果圖
購(gòu)物車(chē)實(shí)現(xiàn)
cart.wxml
<import src="/template/quantity/index.wxml" /> <scroll-view class="scroll" scroll-y="true"> <view class="separate"></view> <view wx:for="{{carts}}"> <view class="cart_container"> <image class="item-select" bindtap="switchSelect" data-index="{{index}}" data-id="{{index}}" src="{{item.isSelect?'../../images/cart/comment_select.png':'../../images/cart/comment_normal.png'}}" /> <image class="item-image" src="{{item.pic}}"></image> <view class="column"> <text class="title">{{item.name}}</text> <view class="row"> <text class="sku-price">¥</text> <text class="sku-price">{{item.price}}</text> <view class="sku"> <template is="quantity" data="{{ ...item.count, componentId: index }}" /> </view> </view> </view> </view> <view class="separate"></view> </view> </scroll-view> <view class="bottom_total"> <view class="bottom_line"></view> <view class="row"> <image class="item-allselect" bindtap="allSelect" src="{{isAllSelect?'../../images/cart/comment_select.png':'../../images/cart/comment_normal.png'}}" /> <text class="small_text">全選</text> <text>合計(jì):¥ </text> <text class="price">{{totalMoney}}</text> <button class="button-red" bindtap="toBuy" formType="submit">去結(jié)算</button> </view> </view>
布局不是很復(fù)雜,一個(gè)循環(huán)列表,循環(huán)出購(gòu)物車(chē)商品,外加一個(gè)結(jié)算的底部控件,還需要提醒的是,循環(huán)列表外面要加一層scroll-view,這樣當(dāng)數(shù)據(jù)很多是時(shí)候,可以滾動(dòng),不熟悉scroll-view的,請(qǐng)自行翻看前面幾篇文章,里面有講解
cat.wxss
/* pages/cart/cart.wxss */ .cart_container { display: flex; flex-direction: row; } .scroll { margin-bottom: 120rpx; } .column { display: flex; flex-direction: column; } .row { display: flex; flex-direction: row; align-items: center; } .sku { margin-top: 60rpx; margin-left: 100rpx; } .sku-price { color: red; position: relative; margin-top: 70rpx; } .price { color: red; position: relative; } .title { font-size: 38rpx; margin-top: 40rpx; } .small_text { font-size: 28rpx; margin-right: 40rpx; margin-left: 10rpx; } .item-select { width: 40rpx; height: 40rpx; margin-top: 90rpx; margin-left: 20rpx; } .item-allselect { width: 40rpx; height: 40rpx; margin-left: 20rpx; } .item-image { width: 180rpx; height: 180rpx; margin: 20rpx; } .bottom_line { width: 100%; height: 2rpx; background: lightgray; } .bottom_total { position: fixed; display: flex; flex-direction: column; bottom: 0; width: 100%; height: 120rpx; line-height: 120rpx; background: white; } .button-red { background-color: #f44336; /* 紅色 */ } button { position: fixed; right: 0; color: white; text-align: center; display: inline-block; font-size: 30rpx; border-radius: 0rpx; width: 30%; height: 120rpx; line-height: 120rpx; }
wxss樣式?jīng)]什么可說(shuō)的,了解其屬性,調(diào)用class就好,重點(diǎn)說(shuō)一下cart.js,全篇的邏輯都在這里面
cart.js
// pages/cart/cart.js var Temp = require('../../template/contract.js'); Page(Object.assign({}, Temp.Quantity, { data: { isAllSelect:false, totalMoney:0, // 商品詳情介紹 carts: [ { pic: "http://mz.djmall.xmisp.cn/files/product/20161201/148058328876.jpg", name:"日本資生堂洗顏", price:200, isSelect:false, // 數(shù)據(jù)設(shè)定 count: { quantity: 2, min: 1, max: 20 }, }, { pic: 'http://mz.djmall.xmisp.cn/files/product/20161201/148058301941.jpg', name: "倩碧煥妍活力精華露", price: 340, isSelect: false, // 數(shù)據(jù)設(shè)定 count: { quantity: 1, min: 1, max: 20 }, }, { pic: 'http://mz.djmall.xmisp.cn/files/product/20161201/14805828016.jpg', name: "特效潤(rùn)膚露", price: 390, isSelect: false, // 數(shù)據(jù)設(shè)定 count: { quantity: 3, min: 1, max: 20 }, }, { pic: 'http://mz.djmall.xmisp.cn/files/product/20161201/148058228431.jpg', name: "倩碧水嫩保濕精華面霜", price: 490, isSelect: false, // 數(shù)據(jù)設(shè)定 count: { quantity: 1, min: 1, max: 20 }, }, { pic: 'http://mz.djmall.xmisp.cn/files/product/20161201/148057953326.jpg', name: "蘭蔻清瑩柔膚爽膚水", price: 289, isSelect: false, // 數(shù)據(jù)設(shè)定 count: { quantity: 10, min: 1, max: 20 }, }, { pic: "http://mz.djmall.xmisp.cn/files/product/20161201/148057921620_middle.jpg", name: "LANCOME蘭蔻小黑瓶精華", price: 230, isSelect: false, // 數(shù)據(jù)設(shè)定 count: { quantity: 1, min: 1, max: 20 }, }, ], }, //勾選事件處理函數(shù) switchSelect: function (e) { // 獲取item項(xiàng)的id,和數(shù)組的下標(biāo)值 var Allprice = 0,i=0; let id = e.target.dataset.id, index = parseInt(e.target.dataset.index); this.data.carts[index].isSelect = !this.data.carts[index].isSelect; //價(jià)錢(qián)統(tǒng)計(jì) if (this.data.carts[index].isSelect) { this.data.totalMoney = this.data.totalMoney + this.data.carts[index].price; } else { this.data.totalMoney = this.data.totalMoney - this.data.carts[index].price; } //是否全選判斷 for (i = 0; i < this.data.carts.length; i++) { Allprice = Allprice + this.data.carts[i].price; } if (Allprice == this.data.totalMoney) { this.data.isAllSelect=true; } else { this.data.isAllSelect = false; } this.setData({ carts: this.data.carts, totalMoney: this.data.totalMoney, isAllSelect: this.data.isAllSelect, }) }, //全選 allSelect: function (e) { //處理全選邏輯 let i = 0; if (!this.data.isAllSelect) { for (i = 0; i < this.data.carts.length; i++) { this.data.carts[i].isSelect = true; this.data.totalMoney = this.data.totalMoney + this.data.carts[i].price; } } else { for (i = 0; i < this.data.carts.length; i++) { this.data.carts[i].isSelect = false; } this.data.totalMoney=0; } this.setData({ carts: this.data.carts, isAllSelect: !this.data.isAllSelect, totalMoney: this.data.totalMoney, }) }, // 去結(jié)算 toBuy() { wx.showToast({ title: '去結(jié)算', icon: 'success', duration: 3000 }); this.setData({ showDialog: !this.data.showDialog }); }, //數(shù)量變化處理 handleQuantityChange(e) { var componentId = e.componentId; var quantity = e.quantity; this.data.carts[componentId].count.quantity = quantity; this.setData({ carts: this.data.carts, }); } }));
介紹一下用到的參數(shù)
isAllSelect:是否全選
totalMoney:總金額
carts :購(gòu)物車(chē)商品數(shù)據(jù)
switchSelect 勾選按鈕需要做的邏輯處理
判斷是否達(dá)到全部勾選,如果全部勾選,底部的全選按鈕要點(diǎn)亮,判斷依據(jù)是,價(jià)錢(qián)是否等于總價(jià),當(dāng)然這只是一種判斷方式,讀者也可以通過(guò)勾選的數(shù)量判斷,
對(duì)勾選或取消的按鈕,進(jìn)行總價(jià)的加減法計(jì)算
this.setData,更新數(shù)據(jù),這個(gè)是重點(diǎn),每次處理完數(shù)據(jù),都要記得更新數(shù)據(jù)
allSelect 全選按鈕的邏輯處理
全選就把每個(gè)item勾選圖標(biāo)點(diǎn)亮,然后統(tǒng)計(jì)總價(jià)錢(qián),不全選就置為灰色,總價(jià)錢(qián)為0
this.setData更新數(shù)據(jù)
微信小程序數(shù)據(jù)處理
一、修改數(shù)據(jù)方式
data:{ name:'我是初始化的name' }
1、this.data.name
this.data.name='我是代碼君data'
2、this.setData
this.setData({ name:'我是代碼君setData' })
這兩種方式都可以改變數(shù)據(jù),this.setData的好處是可以有刷新的效果,即實(shí)時(shí)更新數(shù)據(jù)
二、修改對(duì)象數(shù)組
data:{ person:{ name:'代碼君', city:'廈門(mén)' } }
修改全部對(duì)象
this.setData({ person:{ name:'新代碼君', city:'湖南' } })
修改部分?jǐn)?shù)據(jù)
this.setData({ 'person.name': '代碼君只修改名字' }) //多個(gè)數(shù)組用這個(gè) this.setData({ 'person[0].name': '代碼君只修改名字' })
三、添加刪除數(shù)據(jù)
1、添加數(shù)據(jù)concat
//假設(shè)這一段是我們要新增的數(shù)組 var newarray = [{ name:'增加的數(shù)據(jù)--'+new Date().getTime() , }]; //向前--用newarray與this.data.list合拼 this.data.list = newarray.concat(this.data.list); //向后--用this.data.list與newarray合拼 this.data.list = this.data.list.concat(newarray);
2、刪除數(shù)據(jù)splice()刪除數(shù)據(jù),然后返回被刪除的數(shù)據(jù)
//刪除 remove:function (e){ var dataset = e.target.dataset; var Index = dataset.index; //通過(guò)index識(shí)別要?jiǎng)h除第幾條數(shù)據(jù),第二個(gè)數(shù)據(jù)為要?jiǎng)h除的項(xiàng)目數(shù)量,通常為1 this.data.list.splice(Index,1); //渲染數(shù)據(jù) this.setData({ list:this.data.list }); }
3、清空數(shù)據(jù)
//清空 clear:function (){ //其實(shí)就是讓數(shù)組變成一個(gè)空數(shù)組即可 this.setData({ list:{} }); }
感謝各位的閱讀!關(guān)于“微信小程序中如何實(shí)現(xiàn)購(gòu)物車(chē)”這篇文章就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,讓大家可以學(xué)到更多知識(shí),如果覺(jué)得文章不錯(cuò),可以把它分享出去讓更多的人看到吧!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀(guā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)容。