微信小程序实现购物车功能

<view class="main">
 <view wx:if="{{hasList}}">
  <view class="cart-box">
   <view class="cart-list" wx:for="{{carts}}" wx:key="{{index}}">
    <icon wx:if="{{item.selected}}" type="success" color="red" data-index="{{index}}" class="cart-pro-select" bindtap="selectList"/>
    <icon wx:else type="circle" class="cart-pro-select" data-index="{{index}}" bindtap="selectList"/>
    <navigator url="../details/details"><image class="cart-thumb" src="/UploadFiles/2021-04-02/{{item.image}}">

js:


// page/component/cart/cart.js
Page({

 /**
 * 页面的初始数据
 */
 data: {
  carts: [], //购物车列表
  hasList: false, //列表是否有数据
  totalPrice: 0, // 总价 初始为0 
  selectAllStatus: true, // 全选状态 默认全选
  obj: {
  name: "hello"
  }
 },

 /**
 * 生命周期函数--监听页面加载
 */
 onLoad: function (options) {

 },

 /**
 * 生命周期函数--监听页面初次渲染完成
 */
 onReady: function () {

 },

 /**
 * 生命周期函数--监听页面显示
 */
 onShow: function () {
  this.setData({
   hasList: true, // 含有数据 设为true 
   carts: [
   {id: 1, title: '新鲜芹菜 半斤', image:'/image/s5.png',num:4,price: 0.01,seclected:true},
   {id: 2, title: '素米 500g', image: '/image/s6.png', num: 1, price: 0.03, seclected:true}
   ]
  });
  this.getTotalPrice();
 },
 // 当前商品选中事件
 selectList(e) {
 const index = e.currentTarget.dataset.index; //获取 data 传进来的index
 let carts = this.data.carts;   // 获取购物车列表
 const seclected = carts[index].seclected; //获取当前商品的选中状态
 carts[index].seclected = !seclected; // 改变状态
 this.setData({
  carts: carts
 });
 this.getTotalPrice();      //重新获取总价
 },

 // 删除购物车当前商品
deleteList(e) {
 const index = e.currentTarget.dataset.index;
 let carts = this.data.carts;
 carts.splice(index, 1);     // 删除购物车列表里这个商品
 this.setData({
 carts: carts
 });
 if (!carts.length) {     // 如果购物车为空
 this.setData({
  hasList: false     // 修改标识为false 显示购物车为空页面
 });
 } else {        // 如果不为空 
 this.getTotalPrice();    // 重新计算总价格
 }
},

// 购物车全选事件

selectAll(e) {
 let selectAllStatus = this.data.selectAllStatus; // 是否全选状态
 selectAllStatus = !selectAllStatus;
 let carts = this.data.carts;

 for (let i = 0; i < carts.length; i++) {
  carts[i].selected = selectAllStatus;
 }           // 改变所有商品状态
 this.setData({
  selectAllStatus: selectAllStatus,
  carts: carts
 });
 this.getTotalPrice();  //重新获取总价
},

// 绑定加数量事件
addCount(e) {
 const index = e.currentTarget.dataset.index;
 let carts = this.data.carts;
 let num = carts[index].num;
 num = num + 1;
 carts[index].num = num;
 this.setData({
 carts: carts
 });
 this.getTotalPrice();
},

// 绑定减数量事件
minusCount(e) {
 const index = e.currentTarget.dataset.index;
 const obj = e.currentTarget.dataset.obj;
 let carts = this.data.carts;
 let num = carts[index].num;
 if (num <= 1) {
  return false;
 }
 num = num - 1;
 carts[index].num = num;
 this.setData({
  carts: carts
 });
 this.getTotalPrice();
},

// 计算总价
getTotalPrice() {
  let carts = this.data.carts; // 获取购物车列表
  let total = 0;  
  for (let i = 0; i < carts.length; i ++) { // 循环列表得到每个数据
   if (carts[i].selected) { // 判断选中才会计算价格
   total += carts[i].num * carts[i].price; // 所有价格加起来
   }
  }
  this.setData({       // 最后赋值到data 中渲染到页面
  carts: carts,
  totalPrice: total.toFixed(2)
  });
},

 /**
 * 生命周期函数--监听页面隐藏
 */
 onHide: function () {

 },

 /**
 * 生命周期函数--监听页面卸载
 */
 onUnload: function () {

 },

 /**
 * 页面相关事件处理函数--监听用户下拉动作
 */
 onPullDownRefresh: function () {

 },

 /**
 * 页面上拉触底事件的处理函数
 */
 onReachBottom: function () {

 },

 /**
 * 用户点击右上角分享
 */
 onShareAppMessage: function () {

 }
})



为大家推荐现在关注度比较高的微信小程序教程一篇：《微信小程序开发教程》小编为大家精心整理的，希望喜欢。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。