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

　　介绍

这篇文章将为大家详细讲解有关微信小程序如何实现购物车功能,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

不管是商城类还是餐饮类小程序,都需要通过下单完成交易,因此都需要有一个加入购物车的操作。以往购物车功能基本都是通过大量的DOM操作来实现,由于小程序不是基于web以此无法创建DOM。<强>微信小程序实现购物车功能强其实跟vue。js的用法非常像。

<强>先来弄清楚购物车的需求。

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

单个商品购买数量的增加和减少

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

根据设计图,我们可以先实现静态页面。接下来,再看看一个购物车需要什么样的数据。

首先是一个商品列表(车),列表里的单品需要:商品图(图片),商品名(标题),单价(价格),数量(num),是否选中(选择)、商品id (id)

然后左下角的全选,需要一个字段(selectAllStatus)表示是否全选了

右下角的总价(totalPrice)

最后需要知道购物车是否为空(hasList)

知道了需要这些数据,在页面初始化的时候我们先定义好这些。

<强>初始化代码:

页面({ 　　数据:,,,,{ 　　,,,,,,,车:[],,,,,,,,,,,,,,,,//,购物车列的表 　　,,,,,,,hasList:假的,,,,,,,,,,,//,列表是否有数据 　　,,,,,,totalPrice: 0,,,,,,,,,,,,//,总价,初始为0 　　,,,,,,selectAllStatus: true ,,,//,全选状态,默认全选 　　,,,}, 　　,,,昂秀(),{ 　　,,,,,,,this.setData ({ 　　,,,,,,,,,hasList:真的,,,,,,,,,//,既然有数据了,那设为真正的吧 　　,,,,,,,,,车:( 　　,,,,,,,,,,,{id: 1、标题:\ & # 39;新鲜芹菜,半斤\ & # 39;,形象:\ & # 39;/图像/s5.png \ & # 39;, num: 4,价格:0.01,选择:真正的}, 　　,,,,,,,,,,,{id: 2、标题:\ & # 39;素米,500 g \ & # 39;,形象:\ & # 39;/图像/s6.png \ & # 39;, num: 1,价格:0.03,选择:真正的} 　　,,,,,,,,,) 　　,,,,,,,}); 　　,,,,,}, 　　})

购物车列表数据我们一般是通过请求服务器拿到的数据,所以我们放在生命周期函数里给车赋值。想到每次进到购物车都要获取购物车的最新状态,而onLoad和onReady只在初始化的时候执行一次,所以我需要把请求放在昂秀函数里。

<强>计算总价

总价=选中的商品1的价格*数量+选中的商品2的价格*数量+…

根据公式,可以得到

getTotalPrice (), { 　　,,,let  carts =this.data.carts;,,,,,,,,,,,,,,,,,,//,获取购物车列的表 　　,,,let  total =, 0; 　　,,,(let 小姐:=,0;i

页面中的其他操作会导致总价格变化的都需要调用该方法。

<强>选择事件

点击时选中,再点击又变成没选中状态,其实就是改变选字段。通过材料指数="{{指数}}”把当前商品在列表数组中的下标传给事件。

selectList (e), { 　　,,,const  index =e.currentTarget.dataset.index;,,,,//,获取数据的背后,传进来的指数 　　,,,let  carts =this.data.carts;,,,,,,,,,,,,,,,,,,,,//,获取购物车列的表 　　,,,const  selected =车(指数).selected;,,,,,,,,,//,获取当前商品的选中状态 　　,,,车(指数).selected=, !选择,,,,,,,,,,,,,,,//,改变状态 　　,,,this.setData ({ 　　,,,,,,,车:车 　　,,,}); 　　,,this.getTotalPrice(),,,,,,,,,,,,,,,,,,,,,,,,,,,,//,重新获取总价 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null

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