微信小程序|购物车

简介: 微信小程序|购物车

购物车

在各种购物平台,购物车都是十分常见的,比如淘宝,美团等等各种应用软件。一般的软件购物车都包含商品图片,名称,价格。购物车其实就是一个物品或商品的简介,直观的反映了商品的特性,提醒了用户在购物车内的是一个什么样的商品,一定程度上避免了二次及多次浏览。此外,购物车最重要的功能就是方便用户购买商品,上述特性也都是为了突出这一功能。那么今天我们就来单纯的实现一下购物车功能。这里我们需要使用到上次介绍的多选框。如下图,就是我们今天要介绍的购物车功能。

图1.1 效果图

购物车的实现

首先需要了解购物车实现的功能需求。那么我们就来依次介绍着三种功能并介绍一下实现办法。

大概功能如下:

(1)单个商品购买数量的增加和减少。

(2)删除商品。当购物车为空时,页面会变为空购物车的布局。

(3)单选、全选和取消,而且会随着选中的商品计算出总价。

下面我们就重点介绍几个简单的功能。在index.js文件里,我们采用遍历的方式对玩偶的图片,名称等进行显示。

data: [

       {

         name: "玩偶公仔",

         index: 0,

         state: 0,

         checkeedAll: false,

         data: [

           {

            url: "../../images/1.jpg",

            classtitle: "小羊",

            index: 0,

            state: 0,

            checked: false,

            price: 9.9

           }, {

            url: "../../images/2.jpg",

            classtitle: "吉他1",

            index: 1,

            state: 0,

            checked: false,

            price: 9.9

           },

           {

            url: "../../images/3.jpg",

            classtitle: "吉他1",

            index: 2,

            state: 0,

            checked: false,

            price: 4.9

           }

         ]

       },

     ],

     checkedAll: false,

     count: 0,

     priceAll: 0.0

   },

只有所有单选的单选都选中了,当前单选的这块的的父级就会全部选中 ,将选中的父级添加在一个数组当中。如果它本身的数据的length=它被选中的length,就会让三级的全选选中。

var data = this.data.data;

     var datarr = [];

     for (var a = 0; a < data.length; a++) {

       if (data[a].checkeedAll == true) {

         datarr.push(data[a]);

       }

     }

     if (data.length === datarr.length) {

       this.setData({

         checkedAll: true

       });

     } else {

       this.setData({

         checkedAll: false

       });

     }

 

 

//点击全选

  AllTap:  function (e) {

     var checkedAll = this.data.checkedAll;

     var list1 = this.data.data;

     for (var i = 0; i < list1.length; i++) {

       list1[i].checkeedAll = !checkedAll;

       var list2 = this.data.data[i].data;

       for (var a = 0; a < list2.length; a++) {

         list2[a].checked = !checkedAll;

       }

     }

点击删除按钮则从购物车列表中删除当前元素,删除之后如果购物车为空,改变购物车为空标识。

//点击 单个删除 课程

   shanchuTap: function (e) {

     var that = this;

     var groupIndex = e.target.dataset.groupindex; //点击 单个删除玩偶

   shanchuTap: function (e) {

     var that = this;

     var groupIndex = e.target.dataset.groupindex; //获取当前index

     var index = e.target.dataset.index; //获取玩偶当前index

 

     wx.showModal({

       title: '',

       content: '确定要删除吗?',

       cancelColor: "#ababab",

       confirmColor: "#027ee7",

       success(res) {

         if (res.confirm) {

           var list2 = that.data.data[groupIndex].data;

           list2.splice(index, 1);

           var dataStatus = 'data[' + groupIndex + '].data';

           that.setData({

            [dataStatus]: list2

           });

           wx.showToast({

            title: '删除成功',

            icon: "none",

           })

         } else if (res.cancel) {

           console.log('用户点击取消')

         }

       }

     });

   },

 

     var index = e.target.dataset.index; // 拿到当前玩偶 的index

     wx.showModal({

       title: '',

       content: '确定要删除吗?',

       cancelColor: "#ababab",

       confirmColor: "#027ee7",

       success(res) {

         if (res.confirm) {

           var list2 = that.data.data[groupIndex].data;

           list2.splice(index, 1);

           var dataStatus = 'data[' + groupIndex + '].data';

           that.setData({

            [dataStatus]: list2

           });

           wx.showToast({

            title: '删除成功',

            icon: "none",

           })

         } else if (res.cancel) {

           console.log('用户点击取消')

         }

       }

     });

   },

这里其实对于购物车功能实现的并不完全。但是index.js的代码有点过多,就不再这里展示了。如果有感兴趣的同学,可以去百度网盘提取,尝试一下。网址如下https://pan.baidu.com/s/1SxGulv1D5hY-sgme7oU-eg。提取码:1tim。



目录
相关文章
|
6月前
|
存储 小程序 API
【微信小程序】-- uni-app 项目-- 购物车 -- 首页 - 轮播图效果(五十二)
【微信小程序】-- uni-app 项目-- 购物车 -- 首页 - 轮播图效果(五十二)
【微信小程序】-- uni-app 项目-- 购物车 -- 首页 - 轮播图效果(五十二)
|
6月前
|
小程序 开发工具 git
【微信小程序】-- uni-app 项目--- 购物车 -- 配置 tabBar 效果(五十一)
【微信小程序】-- uni-app 项目--- 购物车 -- 配置 tabBar 效果(五十一)
|
6月前
|
小程序
外卖小程序-购物车模块表结构设计和后端代码
外卖小程序-购物车模块表结构设计和后端代码
59 0
|
6月前
|
小程序 JavaScript 前端开发
点餐小程序实战教程08-购物车功能开发
点餐小程序实战教程08-购物车功能开发
|
移动开发 小程序 前端开发
h5,小程序飞入购物车(抛物线绘制运动轨迹点)
小程序飞入购物车,一次性解决!
h5,小程序飞入购物车(抛物线绘制运动轨迹点)
|
小程序 JavaScript
微信小程序购物车 数量加减功能
微信小程序购物车 数量加减功能
274 0
|
小程序 JavaScript 前端开发
微信小程序之购物车的交互场景
微信小程序之购物车的交互场景
305 0
|
小程序 Python
利用 Python 实现一个购物车小程序
利用 Python 实现一个购物车小程序
102 0
利用 Python 实现一个购物车小程序
|
1月前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
549 7
下一篇
无影云桌面