微信小程式 購物車單選，全選，刪除，結算功能

如下，我們要實現購物車的單選，全選，刪除，結算功能： 

x 全選￥}

結算這裡的勾選圖示我是用本地的，有其它方法可自行修改。 

index.js

function getattr(e, key) 

page()
if (goods.count === 1) return
goods.count--
this.setdata()
this.settlement();
},addcount(e) )
goods.count++
this.setdata()
this.settlement();
},//單選
select(e) )
goods.checked = !goods.checked;
let isselectall = this.data.goodslist.every(r => r.checked)
this.setdata()
this.settlement();
},// 全選
selectall() );
this.setdata()
this.settlement();
},// 結算
settlement() 
})// console.log(tatalprice)
this.setdata()
},//刪除
dellistitem(e))
},/**
* 頁面的初始資料
*/data: ,,,
],},
/*** 生命週期函式--監聽頁面載入
*/onload: function (options) 
})

.shop-item 

.shop-text 
.check
.desc 
.price 
.btn-del
/* 數字加減 */
.count 
.count view 
.count-minus 
.count-add 
.shop-footer 
.footer-btn
.allprice
.selectall

微信小程式購物車功能

管理您的購物車 點選立即前往 全選 合計 結算 page shop mana management goto carts goods goods check checkbox goods details goods img goods img image goods title goods name...

微信小程式之購物車demo

這篇小demo主要使用了一下幾個技術點 1 全域性變數的使用 在這裡定義的變數 任何乙個頁面和元件都可以訪問到 在使用到的頁面 宣告乙個例項 然後 這樣就可以訪問到 修改也可以直接修改 2 input元件的使用 這種把checkbox group 放在循壞裡面是不太好的 因為這樣列印那個事件e的話取...

微信小程式之購物車功能

先來弄清楚購物車的需求。根據設計圖，我們可以先實現靜態頁面。接下來，再看看乙個購物車需要什麼樣的資料。知道了需要這些資料，在頁面初始化的時候我們先定義好這些。page onshow 購物車列表資料我們一般是通過請求伺服器拿到的資料，所以我們放在生命週期函式裡給 carts 賦值。想到每次進到購物車都...