微信小程序中购物车的简单例子(小程序商品加入购物车)

本文主要介绍一个简单的微信小程序购物车实例的相关信息。有需要的朋友可以参考一下。

微信小程序，这里实现购物车功能的小演示。需要这个功能的朋友可以参考一下。

加减商品数量，合计价格，选择全部或无。

设计理念:

1.从网络上传以下Json数据格式的数组。1.购物车ID: CID 2。标题3。数量编号4。图片地址5。价格价格6。小计7。被选中被选中了吗？

其次，单击复选框切换操作。如果已经选中，点击后会变成未选中，反之，点击索引作为logo而不是cid，方便遍历。

3.全选操作:第一次全选，第二次不选。“全选”按钮本身也遵循切换变换。

4.点击结算按钮，取出选中的cid数组，通过网络提交给服务器。在此，祝酒词作为结果演示。

5.用步进器做加减法，也用索引做logo，点击后写回num值。

不及物动词布局，全选并与结算按钮底部对齐，购物车商城有自适应高度，类似安卓的重量。

步骤:

初始数据渲染

1.1布局和样式表

顶部是商品列表，底部是全选按钮和立即结算按钮。

列表的左边是产品缩略图，右上是产品标题，右下是产品价格和数量，其中产品数量由WXStepper加减。

Js:初始化一个数据源，这个数据源往往是从网络上获取的。相关界面见https://MP . weixin . QQ . com/debug/wxa doc/dev/API/network -request . html。

页面({数据:{购物车:

1.2集成WXStepper

复制组件内容

1.4添加全选并立即结算按钮。

1.4.1修改布局文件实现以上按钮的底部对齐，使用flex和固定高度完成。

减少到3线看是否还在底部；此外，确保它悬浮在底部，不会被列表项的滚动所滚动。

& ltview class = & quotcarts -页脚& quot& gt& lt视图bindtap = & quotbindSelectAll & quot& gt& lticon wx:if = & quot；{ { selectedAllStatus } } & quottype = & quot成功圈& quotsize = & quot20 & quot/& gt；& lticon wx:else type = & quot；圆圈& quotsize = & quot20 & quot/& gt；& lttext & gt全选</text & gt；& lt/view & gt；& ltview class = & quot按钮& quot& gt立即结算

显示器:flexflex -方向:rowjustify -内容:space -之间；样式表

/*底部按钮*/. carts -页脚{ width:100%；身高:80rpx显示器:flexflex -方向:rowjustify -内容:space -之间；}/*复选框*/. carts -页脚图标{ margin -left:20 rpx；}/*选择所有单词*/. carts -页脚文本{ font -size:30 rpx；margin -left:8 rpx；line -高度:10rpx}/*立即结算按钮*/. carts -footer . button { line -height:80 rpx；text-align:居中；宽度:220rpx身高:80rpxbackground -color:# f60；颜色:白色；font -size:36 rpx；border -半径:0；边框:0；}1.4.2全选和不选事件

实现bindSelectAll事件，并更改全选状态。

首先，定义一个数据值来记录所有选择的状态。

selectedAllStatus: false

事件实现:

BindSelectAll: function() {//环境中当前选中的状态var selected all status = this . data . selected all status；//反向操作selectedAllStatus =！selectedAllStatus//购物车数据，关键是处理选中的值var carts = this . data . carts；//遍历for(var I = 0；我& lt手推车.长度；i++) {购物车

1.4.3立即结算显示当前选择的cid以提交给网络。cid中要包含商品的数量，后端设计只关注cid和uid。

版面也埋在吐司里。js只需要改变吐司的显示与否。

& lttoast hidden = & quot{ { toastHidden } } & quotbindchange = & quotbindtoastschange & quot；& gt{ { toastStr } } & lt/toast & gt；为了立即解决绑定事件bindCheckout，将弹出cid弹出窗口。

bind check out:function(){//Initialize toastStr string var toastStr = & # 039；cid:& # 039；；//遍历并取出检查过的cid for(var I = 0；我& ltthis . data . carts . length；i++) { if (this.data.carts

1.6摘要

1.6.1先定义一个数据源，在布局文件里埋一个坑。

总计:& # 039；'

& lttext & gt{ { total } } & lt/text & gt；

1.6.2通用汇总功能

sum:function(){ var carts = this . data . carts；//计算总金额var total = 0；for(var I = 0；我& lt手推车.长度；i++) { if(购物车