[转]微信小程序之购物车功能

本文转自：https://www.cnblogs.com/linxin/p/6834206.html

前言

以往的购物车，基本都是通过大量的 DOM 操作来实现。微信小程序其实跟 vue.js 的用法非常像，接下来就看看小程序可以怎样实现购物车功能。

需求

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

单选、全选和取消，而且会随着选中的商品计算出总价
单个商品购买数量的增加和减少
删除商品。当购物车为空时，页面会变为空购物车的布局

原文作者：林鑫，作者博客：https://github.com/lin-xin/blog

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

首先是一个商品列表(carts)，列表里的单品需要：商品图(image)，商品名(title)，单价(price)，数量(num)，是否选中(selected)，商品id(id)
然后左下角的全选，需要一个字段(selectAllStatus)表示是否全选了
右下角的总价(totalPrice)
最后需要知道购物车是否为空(hasList)

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

代码实现

初始化

Page({data: { carts:[], // 购物车列表 hasList:false, // 列表是否有数据 totalPrice:0, // 总价，初始为0 selectAllStatus:true // 全选状态，默认全选 }, onShow() { this.setData({ hasList: true, // 既然有数据了，那设为true吧 carts:[ {id:1,title:'新鲜芹菜 半斤',image:'/image/s5.png',num:4,price:0.01,selected:true}, {id:2,title:'素米 500g',image:'/image/s6.png',num:1,price:0.03,selected:true} ] }); }, })

购物车列表数据我们一般是通过请求服务器拿到的数据，所以我们放在生命周期函数里给 carts 赋值。想到每次进到购物车都要获取购物车的最新状态，而onLoad和onReady只在初始化的时候执行一次，所以我需要把请求放在 onShow 函数里。(这里先拿点假数据冒充一下吧)

布局 wxml

修好之前写好的静态页面，绑定数据。

 <view class="cart-box"> <!-- wx:for 渲染购物车列表 --> <view wx:for="{{carts}}"> <!-- wx:if 是否选择显示不同图标 --> <icon wx:if="{{item.selected}}" type="success" color="red" bindtap="selectList" data-index="{{index}}" /> <icon wx:else type="circle" bindtap="selectList" data-index="{{index}}"/> <!-- 点击商品图片可跳转到商品详情 --> <navigator url="../details/details?id={{item.id}}"> <image class="cart-thumb" src="{{item.image}}"></image> </navigator> <text>{{item.title}}</text> <text>￥{{item.price}}</text> <!-- 增加减少数量按钮 --> <view> <text bindtap="minusCount" data-index="{{index}}">-</text> <text>{{item.num}}</text> <text bindtap="addCount" data-index="{{index}}">+</text> </view> <!-- 删除按钮 --> <text bindtap="deleteList" data-index="{{index}}"> × </text> </view> </view> <!-- 底部操作栏 --> <view> <!-- wx:if 是否全选显示不同图标 --> <icon wx:if="{{selectAllStatus}}" type="success_circle" color="#fff"

[转]微信小程序之购物车功能相关推荐

微信小程序实战购物车功能
代码地址如下: http://www.demodashi.com/demo/12400.html 一.准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.com ...
微信小程序实现购物车功能，包含完整小程序代码和运行效果截图
微信小程序实现购物车功能,在商场比较常见,今天刚刚做好,效果不错. 下面从js文件,json文件,wxml文件和wxss文件,分享给大家. 直接上代码: 目录 1.index.js文件内容 2.ind ...
微信小程序之购物车功能
前言以往的购物车,基本都是通过大量的 DOM 操作来实现.微信小程序其实跟 vue.js 的用法非常像,接下来就看看小程序可以怎样实现购物车功能. 需求先来弄清楚购物车的需求. 单选.全选和取消, ...
小程序判断数组的index是否为空_微信小程序之购物车功能（仅学习）
购物车,基本都是通过大量的 DOM 操作来实现.微信小程序其实跟 vue.js 的用法非常像,接下来就看看小程序可以怎样实现购物车功能. 需求先来弄清楚购物车的需求. 单选.全选和取消,而且会随着选 ...
微信小程序实现购物车功能
在我的GitHub上有校园二手交易微信小程序的源码,这里面包含了购物车的功能,GitHub地址:https://github.com/zhuyuzhu/Secondhand-goods-on-camp ...
微信小程序之购物车功能 1
前言以往的购物车,基本都是通过大量的 DOM 操作来实现.微信小程序其实跟 vue.js 的用法非常像,接下来就看看小程序可以怎样实现购物车功能. 完整的小程序商城demo含购物车,请戳:wxapp ...
微信小程序商城开发功能构架介绍
微信小程序商城开发,微信小程序商城开发功能,微信小程序商城开发介绍.截止到2021年末初手机微信小程序总数就早就超过400万,而且网络购物小程序愈来愈占有蛮大的占有率,而这类的小程序大家一般称作商城小 ...
黯然微信小程序杂记（三）：微信小程序实现倒计时功能附讲解教学附源码
黯然微信小程序杂记(三):微信小程序实现倒计时功能附超详细注释附源码一.功能描述二.界面展示三.test.wxml代码四.test.js代码(注释很详细很易懂) CSDN私信我,有关微信 ...
微信小程序（购物车）--在wxml中设置保留小数位数
微信小程序(购物车)–在wxml中设置保留小数位数一.在该页面文件夹下新建一个wxs后缀的文件 var filters = {toFix: function (value) {return valu ...
微信小程序实现语音识别功能
原标题:微信小程序实现语音识别功能使用小程序实现语音识别功能,由于语音识别可以直接使用各厂家的API接口,并且小程序为腾讯所有,因此考虑到可能的低延时,采用了腾讯提供的免费API接口,准确讲是腾讯语 ...

[转]微信小程序之购物车功能

前言

需求

代码实现

初始化

布局 wxml

[转]微信小程序之购物车功能相关推荐

最新文章

热门文章