目錄
1、代碼分析
1.1? dom結(jié)構(gòu)分析
1.2? 全選控制反選
1.3? 反選控制全選
1.4、計算總價
1.4 加、減
2、效果、代碼演示?
1、代碼分析
1.1? dom結(jié)構(gòu)分析
購物車的組件結(jié)構(gòu)主要由兩部分組成：多選框部分( checkbox-group ) + 全選框部分( view )
1.2? 全選控制反選
業(yè)務邏輯：
1、全選框（選中）——》 多選框（選中）、全選框（不選中）——》 多選框（不選中）
2、令復選框跟隨全選框的狀態(tài)變化——遍歷數(shù)據(jù)，設置每條數(shù)據(jù)的 isChecked 狀態(tài)
注意：因為無法直接操作數(shù)據(jù)，所以需要先行拷貝數(shù)據(jù)，再對其進行遍歷（在本項目中，所有需要對數(shù)據(jù)進行遍歷、篩選操作的步驟，都需要先拷貝數(shù)據(jù)）
allChecked(e){
console.log(e); //觸發(fā)點擊事件，拿到全選框的事件源對象
// 全選框： 狀態(tài)為 true時，令其為 false，當狀態(tài)為 false時，令其狀態(tài)變?yōu)?true
if(this.data.isAllChecked){
// 遍歷數(shù)據(jù)，令復選框的狀態(tài)跟隨全選框變化
// 拷貝數(shù)據(jù)、遍歷數(shù)據(jù)
let goodslist=JSON.parse(JSON.stringify(this.data.goods))
goodslist.forEach(item=>item.isChecked=false)
this.setData({
isAllChecked:false,
goods:goodslist //重新渲染
})
}else{
let goodslist=JSON.parse(JSON.stringify(this.data.goods))
goodslist.forEach(item=>item.isChecked=true)
this.setData({
isAllChecked:true,
goods:goodslist
})
}
},1.3? 反選控制全選
業(yè)務邏輯：
1、多選框（全部選中）——》全選框（選中）
因為復選框有多個，全選框只有一個，所以多選框控制全選框被選中的前提是確定每一個多選框都被選中了? ，打印復選框的事件源對象，發(fā)現(xiàn)復選框有一 detail.value 屬性，可顯示?復選框為 true 的對象 / 數(shù)量。所以當 e.detail.value.length===this.data.goods.length 時，表示復選框都被選中了
?2、多選框（有一不選中）——》全選框（不選中）
遍歷數(shù)據(jù)（ forEach ） 并 檢查元素 （ includes ），如果?e.detail.value 中包含 數(shù)據(jù)id，則令該復選框的 isChecked=true，否則為 false
// 單選控制全選
changeCound(e) {
console.log(e);
let checkedArr = e.detail.value
if (checkedArr.length == this.data.goods.length) {
let goodsList = JSON.parse(JSON.stringify(this.data.goods))
goodsList.forEach(item => item.isChecked = true)
this.setData({
isAllChecked: true,
goods: goodsList
})
} else {
let goodsList = JSON.parse(JSON.stringify(this.data.goods))
goodsList.forEach(item => {
if (checkedArr.includes(item.id)) {
item.isChecked = true
} else {
item.isChecked = false
}
})
this.setData({
isAllChecked: false,
goods: goodsList
})
}
},1.4、計算總價
通常用 reduce 來計算總價，其中 total 表示舊值，item表示新值，0為初始值
. reduce( ( total , item ) => { } , 0 )
// 計算總價
computedTotalPrice() {
let totalPrice = this.data.goods.reduce((total, item) => {
if (item.isChecked) {
return total + item.num * item.price
} else {
return total
}
}, 0)
this.setData({
totalPrice: totalPrice
})
},
1.4 加、減
// 加、減、刪除
handle: function (e) {
let id = e.currentTarget.dataset.id
console.log(id);
var index = e.currentTarget.dataset.index
var val = `goods[${index}].num` //對數(shù)據(jù)對象 goods 中的 num 屬性進行修改
let oldnum = this.data.goods.find(item => item.id == id).num //查找
console.log(oldnum);
// 減
if (e.currentTarget.dataset.name == "mulse") {
let newNum = oldnum - 1
if (newNum > 0) {
this.setData({
[val]: newNum
})
}else if(newNum == 0){
let goodsList = JSON.parse(JSON.stringify(this.data.goods))
let newGoodList=goodsList.filter(item=>item.id!==id)
this.setData({
goods:newGoodList
})
}
// 加
}else if(e.currentTarget.dataset.name=="add"){
let newnum=++oldnum
this.setData({
[val]:newnum
})
}
// 刪除
else if (e.currentTarget.dataset.name == "del") {
let goodslist = JSON.parse(JSON.stringify(this.data.lists))
let newLists = goodslist.filter(item => item.id !== id)
this.setData({
lists: newLists
})
}
this.computedTotalPrice()
}
})2、代碼演示?
?index.wxml:
<checkbox-group bindchange="changeCound" class="top">
<view wx:for="{{goods}}" wx:key="id" class="checkbox">
<view class="chleft">
<checkbox value="{{item.id}}" checked="{{item.isChecked}}" class="cleft"></checkbox>
<image src="{{item.imgUrl}}" mode="" class="pic" />
</view>
<view class="Box">
<view class="box-left">
<text class="name">{{item.name}}</text>
<text class="price">￥{{item.price}}</text>
</view>
<view class="box-right">
<text bindtap="handle" data-id="{{item.id}}" data-name="mulse" data-index="{{index}}">-</text>
<text>{{item.num}}</text>
<text bindtap="handle" data-id="{{item.id}}" data-name="add" data-index="{{index}}">+</text>
<text bindtap="handle" class="del">x</text>
</view>
</view>
</view>
</checkbox-group>
<view class="bottom">
<view class="bottom-box" bindtap="allChecked">
<label>
<checkbox value="" checked="{{isAllChecked}}" />
<text>全選</text>
</label>
</view>
<view class="total">
{{totalPrice}} 元
</view>
</view>index.scss文章來源：http://www.zghlxwxcb.cn/news/detail-430843.html
.top {
height:90vh;
overflow: auto;
.checkbox {
position: relative;
width: 100vw;
height: 100px;
border: 1px solid #eee;
display: flex;
flex-direction: row;
.chleft{
display: flex;
flex-direction: row;
align-content: center;
width: 41%;
.cleft {
margin-left: 10px;
margin-right: 10px;
line-height: 100px;
}
.pic {
width:80px;
height: 80px;
margin-top: 10px;
object-fit: cover;
}
}
.Box{
width: 59%;
height: 100%;
background-color: #fff;
.box-left{
position: relative;
width: 100%;
height: 50%;
text{
position: relative;
width:50px;
height: 20px;
margin-left: 10px;
}
.name{
position: absolute;
top:20rpx;
left:5rpx;
}
.price{
position: absolute;
top:20rpx;
right:5rpx;
text-align: left;
}
}
.box-right{
position: relative;
margin-top: 17px;
>text{
width: 20px;
margin-left: 10px;
font-weight: bolder;
}
.del{
position: absolute;
top:-2px;
right: 10px;
margin-left: 100px;
}
}
}
}
}
.bottom{
position: fixed;
bottom: 0;
left:0;
width: 100%;
height: 11vh;
box-shadow: 5px 5px 5px 5px rgb(204, 204, 204);
line-height: 11vh;
display: flex;
flex-direction: row;
.bottom-box{
width: 50%;
margin-left: 10px;
}
.total{
width: 50%;
text-align: right;
padding-right: 15px;
}
}index.js文章來源地址http://www.zghlxwxcb.cn/news/detail-430843.html
Page({
data: {
goods: [
{
id: '1',
name: '黃桃',
num: 10,
price: 10,
isChecked: false,
imgUrl: '/images/HT.jpg'
},
{
id: '2',
name: '西瓜',
num: 20,
price: 8,
isChecked: true,
imgUrl: '/images/XG.jpg'
},
{
id: '3',
name: '獼猴桃',
num: 6,
price: 12,
isChecked: false,
imgUrl: '/images/MHT.jpg'
}
],
isAllChecked: false,
totalPrice: 0
},
onLoad() {
this.computedTotalPrice()
},
// 單選控制全選
changeCound(e) {
console.log(e);
let checkedArr = e.detail.value
if (checkedArr.length == this.data.goods.length) {
let goodsList = JSON.parse(JSON.stringify(this.data.goods))
goodsList.forEach(item => item.isChecked = true)
this.setData({
isAllChecked: true,
goods: goodsList
})
} else {
let goodsList = JSON.parse(JSON.stringify(this.data.goods))
goodsList.forEach(item => {
if (checkedArr.includes(item.id)) {
item.isChecked = true
} else {
item.isChecked = false
}
})
this.setData({
isAllChecked: false,
goods: goodsList
})
}
this.computedTotalPrice()
},
// 全選控制單選
allChecked(e) {
if (this.data.isAllChecked) {
let goodsList = JSON.parse(JSON.stringify(this.data.goods))
goodsList.forEach(item => item.isChecked = false) //這里是賦值
this.setData({
isAllChecked: false,
goods: goodsList
})
} else {
let goodsList = JSON.parse(JSON.stringify(this.data.goods))
goodsList.forEach(item => item.isChecked = true) //這里是賦值
this.setData({
isAllChecked: true,
goods: goodsList
})
}
this.computedTotalPrice()
},
// 計算總價
computedTotalPrice() {
let totalPrice = this.data.goods.reduce((total, item) => {
if (item.isChecked) {
return total + item.num * item.price
} else {
return total
}
}, 0)
this.setData({
totalPrice: totalPrice
})
},
// 加、減、刪除
handle: function (e) {
let id = e.currentTarget.dataset.id
console.log(id);
var index = e.currentTarget.dataset.index
var val = `goods[${index}].num`
let oldnum = this.data.goods.find(item => item.id == id).num
console.log(oldnum);
if (e.currentTarget.dataset.name == "mulse") {
let newNum = oldnum - 1
if (newNum > 0) {
this.setData({
[val]: newNum
})
}else if(newNum == 0){
let goodsList = JSON.parse(JSON.stringify(this.data.goods))
let newGoodList=goodsList.filter(item=>item.id!==id)
this.setData({
goods:newGoodList
})
}
}else if(e.currentTarget.dataset.name=="add"){
let newnum=++oldnum
this.setData({
[val]:newnum
})
}
this.computedTotalPrice()
}
})到了這里，關(guān)于11、微信小程序——購物車的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
