首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

微信小程序 购物车简单实例

Posted in Javascript onOctober 24, 2016

微信小程序，这里实现购物车功能的小demo,有需要此功能的朋友可以参考下。

摘要: 加减商品数量，汇总价格，全选与全不选

设计思路：

一、从网络上传入以下Json数据格式的数组 1.购物车id：cid 2.标题title 3.数量num 4.图片地址 5.价格price 6.小计 7.是否选中selected

二、点击复选框toggle操作 如已经选中的，经点击变成未选中，反之而反之 点击依据index作为标识，而不用cid，方便遍历

三、全选操作 首次点击即为全部选中，再次点击为全不选，全选按钮本身也跟随toggle变换

四、点击结算按钮，将已选中的cid数组取出，以供通过网络提交到服务端，这里给个toast作为结果演示。

五、利用stepper作加减运算，同样依据index作为标识，点完写回num值。

六、布局，全选与结算按钮底部对齐，购物车商城自适应高度，类似于Android的weight。

步骤：

初始数据渲染

1.1 布局与样式表

上方是一个商品列表，下方是一个全选按钮与立即结算按钮

商品列表左部为商品缩略图，右上为商品标题，右下为商品价格与数量，其中商品数量使用WXStepper来实现加减操作

js：初始化一个数据源，这往往是从网络获取的，相关接口可参见：https://mp.weixin.qq.com/debug/wxadoc/dev/api/network-request.html

Page({
  data:{
    carts: [
      {cid:1008,title:'Zippo打火机',image:'https://img12.360buyimg.com/n7/jfs/t2584/348/1423193442/572601/ae464607/573d5eb3N45589898.jpg',num:'1',price:'198.0',sum:'198.0',selected:true},
      {cid:1012,title:'iPhone7 Plus',image:'https://img13.360buyimg.com/n7/jfs/t3235/100/1618018440/139400/44fd706e/57d11c33N5cd57490.jpg',num:'1',price:'7188.0',sum:'7188.0',selected:true},
      {cid:1031,title:'得力订书机',image:'https://img10.360buyimg.com/n7/jfs/t2005/172/380624319/93846/b51b5345/5604bc5eN956aa615.jpg',num:'3',price:'15.0',sum:'45.0',selected:false},
      {cid:1054,title:'康师傅妙芙蛋糕',image:'https://img14.360buyimg.com/n7/jfs/t2614/323/914471624/300618/d60b89b6/572af106Nea021684.jpg',num:'2',price:'15.2',sum:'30.4',selected:false},
      {cid:1063,title:'英雄钢笔',image:'https://img10.360buyimg.com/n7/jfs/t1636/60/1264801432/53355/bb6a3fd1/55c180ddNbe50ad4a.jpg',num:'1',price:'122.0',sum:'122.0',selected:true},
    ]
  }
})

布局文件

<view class="container carts-list">
  <view wx:for="{{carts}}" class="carts-item" data-title="{{item.title}}" data-url="{{item.url}}" bindtap="bindViewTap">
    <view>
     <image class="carts-image" src="{{item.image}}" mode="aspectFill"/>
    </view>
   <view class="carts-text">
    <text class="carts-title">{{item.title}}</text>
    <view class="carts-subtitle">
     <text class="carts-price">{{item.sum}}</text>
     <text>WXStepper</text>
    </view>
   </view>
  </view>
</view>

样式表

/*外部容器*/
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
} 

/*整体列表*/
.carts-list {
  display: flex;
  flex-direction: column;
  padding: 20rpx 40rpx;
}

/*每行单元格*/
.carts-item {
  display: flex;
  flex-direction: row;
  height:150rpx;
  /*width属性解决标题文字太短而缩略图偏移*/
  width:100%;
  border-bottom: 1px solid #eee;
  padding: 30rpx 0;
}

/*左部图片*/
.carts-image {
  width:150rpx;
  height:150rpx;
}


/*右部描述*/
.carts-text {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/*右上部分标题*/
.carts-title {
  margin: 10rpx;
  font-size: 30rpx;
}

/*右下部分价格与数量*/
.carts-subtitle {
  font-size: 25rpx;
  color:darkgray;
  padding: 0 20rpx;
  display: flex;
  flex-direction: row;
  justify-content:space-between;
}

/*价格*/
.carts-price {
  color: #f60;
}

微信小程序 购物车简单实例

1.2 集成WXStepper

1.2.1 复制组件内容

[2016-10-16]

将stepper.wxss的内容复制到cart.wxss中

将stepper.wxml的内容复制到cart.wxml中

与之前的单一组件不同的是：这里要定义数组minusStatuses来与每一个加减按钮相应。当然，合并入carts也是没问题的。

        minusStatuses: ['disabled', 'disabled', 'normal', 'normal', 'disabled']

原来的静态字符WXStepper换成以下的代码

<view class="stepper">
        <!-- 减号 -->
        <text class="{{minusStatuses[index]}}" data-index="{{index}}" bindtap="bindMinus">-</text>
        <!-- 数值 -->
        <input type="number" bindchange="bindManual" value="{{item.num}}" />
        <!-- 加号 -->
        <text class="normal" data-index="{{index}}" bindtap="bindPlus">+</text>
       </view>

js代码bindMinus、bindPlus分别改造为如下：

bindMinus: function(e) {
    var index = parseInt(e.currentTarget.dataset.index);
    var num = this.data.carts[index].num;
    // 如果只有1件了，就不允许再减了
    if (num > 1) {
      num --;
    }
    // 只有大于一件的时候，才能normal状态，否则disable状态
    var minusStatus = num <= 1 ? 'disabled' : 'normal';
    // 购物车数据
    var carts = this.data.carts;
    carts[index].num = num;
    // 按钮可用状态
    var minusStatuses = this.data.minusStatuses;
    minusStatuses[index] = minusStatus;
    // 将数值与状态写回
    this.setData({
      carts: carts,
      minusStatuses: minusStatuses
    });
  },
  bindPlus: function(e) {
    var index = parseInt(e.currentTarget.dataset.index);
    var num = this.data.carts[index].num;
    // 自增
    num ++;
    // 只有大于一件的时候，才能normal状态，否则disable状态
    var minusStatus = num <= 1 ? 'disabled' : 'normal';
    // 购物车数据
    var carts = this.data.carts;
    carts[index].num = num;
    // 按钮可用状态
    var minusStatuses = this.data.minusStatuses;
    minusStatuses[index] = minusStatus;
    // 将数值与状态写回
    this.setData({
      carts: carts,
      minusStatuses: minusStatuses
    });
  },

效果如图：

微信小程序 购物车简单实例

[2016-10-17]

修正手工改动数量保存到数组

1.3 集成LXCheckboxGroup

复制布局文件代码到wxml，这里需要判断一下已选状态，一般购物车勾选状态是记录在网络的。

index值用于传值js，遍历之用。

      

<!-- 复选框图标 -->
    <icon wx:if="{{item.selected}}" type="success_circle" size="20" bindtap="bindCheckbox" data-index="{{index}}"/>
    <icon wx:else type="circle" size="20" bindtap="bindCheckbox" data-index="{{index}}"/>

复选框居中

/*复选框样式*/
.carts-list icon {
  margin-top: 60rpx;
  margin-right: 20rpx;
}

绑定点击复选框事件，对选择状态做反选操作。

bindCheckbox: function(e) {
    /*绑定点击事件，将checkbox样式改变为选中与非选中*/
    //拿到下标值，以在carts作遍历指示用
    var index = parseInt(e.currentTarget.dataset.index);
    //原始的icon状态
    var selected = this.data.carts[index].selected;
    var carts = this.data.carts;
    // 对勾选状态取反
    carts[index].selected = !selected;
    // 写回经点击修改后的数组
    this.setData({
      carts: carts
    });
  }

效果图：

微信小程序 购物车简单实例

1.4 加入全选与立即结算按钮

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

减少为3行，看是否还在最底；此外，还要保证悬浮在底部，不被列表项的滚动而滚动。

<view class="carts-footer">
    <view bindtap="bindSelectAll">
      <icon wx:if="{{selectedAllStatus}}" type="success_circle" size="20"/>
      <icon wx:else type="circle" size="20" />
      <text>全选</text>
    </view>
    <view class="button">立即结算</view>
  </view>

之前用<button>立即结算</button>来实现，发现无论如何都不能实现全选部件与结算按钮分散对齐，不响应如下样式

display: flex;
  flex-direction: row;
  justify-content: space-between;

样式表

/*底部按钮*/
.carts-footer {
  width: 100%;
  height: 80rpx;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

/*复选框*/
.carts-footer icon {
  margin-left: 20rpx;
}

/*全选字样*/
.carts-footer text {
  font-size: 30rpx;
  margin-left: 8rpx;
  line-height: 10rpx;
}

/*立即结算按钮*/
.carts-footer .button {
  line-height: 80rpx;
  text-align: center;
  width:220rpx;
  height: 80rpx;
  background-color: #f60;
  color: white;
  font-size: 36rpx;
  border-radius: 0;
  border: 0;
}

1.4.2 全选与全不选事件

实现bindSelectAll事件，改变全选状态

首先定义一个data值，以记录全选状态

selectedAllStatus: false

事件实现：

bindSelectAll: function() {
    // 环境中目前已选状态
    var selectedAllStatus = this.data.selectedAllStatus;
    // 取反操作
    selectedAllStatus = !selectedAllStatus;
    // 购物车数据，关键是处理selected值
    var carts = this.data.carts;
    // 遍历
    for (var i = 0; i < carts.length; i++) {
      carts[i].selected = selectedAllStatus;
    }
    this.setData({
      selectedAllStatus: selectedAllStatus,
      carts: carts
    });
  }

微信小程序 购物车简单实例

1.4.3 立即结算显示目前所选的cid，以供提交到网络，商品数量应该是包括在cid中的，后端设计应该只关注cid与uid

布局文件也埋一下toast，js只要改变toast的显示与否即可。

<toast hidden="{{toastHidden}}" bindchange="bindToastChange">
  {{toastStr}}
</toast>

为立即结算绑定事件bindCheckout，弹出cid弹窗

bindCheckout: function() {
    // 初始化toastStr字符串
    var toastStr = 'cid:';
    // 遍历取出已勾选的cid
    for (var i = 0; i < this.data.carts.length; i++) {
      if (this.data.carts[i].selected) {
        toastStr += this.data.carts[i].cid;
        toastStr += ' ';
      }
    }
    //存回data
    this.setData({
      toastHidden: false,
      toastStr: toastStr
    });
  },
  bindToastChange: function() {
    this.setData({
      toastHidden: true
    });
  }

1.5 底部悬浮固定

1.5.1 商品列表 .carts-list 加入 margin-bottom: 80rpx; 以及修改上边距为零，使得底部部件与分隔不重复出现，padding: 0 40rpx;

1.5.2 底部按钮 .carts-footer 加入 background: white;

1.5.3 .carts-footer 加入

position: fixed;
  bottom: 0;
  border-top: 1px solid #eee;

微信小程序 购物车简单实例

1.6 汇总

1.6.1 首先定义一个数据源，并在布局文件中埋坑

total: ''

<text>{{total}}</text>

1.6.2 通用汇总函数

sum: function() {
    var carts = this.data.carts;
    // 计算总金额
    var total = 0;
    for (var i = 0; i < carts.length; i++) {
      if (carts[i].selected) {
        total += carts[i].num * carts[i].price;
      }
    }
    // 写回经点击修改后的数组
    this.setData({
      carts: carts,
      total: '￥' + total
    });
  }

然后分别在bindMinus bindPlus bindCheckbox bindSelectAll onLoad中调用this.sum()

如图：

微信小程序 购物车简单实例

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

微信小程序 购物车简单实例

- Author -

lqh

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
Javascript MD4
Dec 20 Javascript
JavaScript与DOM组合动态创建表格实例
Dec 23 Javascript
使用js对select动态添加和删除OPTION示例代码
Aug 12 Javascript
js用typeof方法判断undefined类型
Jul 15 Javascript
JavaScript数组对象赋值用法实例
Aug 04 Javascript
JavaScript实现横向滑出的多级菜单效果
Oct 09 Javascript
浅谈JavaScript中数组的增删改查
Jun 20 Javascript
js模拟微博发布消息
Feb 23 Javascript
Vue+Element使用富文本编辑器的示例代码
Aug 14 Javascript
Three.js利用dat.GUI如何简化试验流程详解
Sep 26 Javascript
requireJS模块化实现返回顶部功能的方法详解
Oct 16 Javascript
antd vue table跨行合并单元格,并且自定义内容实例
Oct 28 Javascript
Select2.js下拉框使用小结
Oct 24 #Javascript
微信小程序 绘图之饼图实现
Oct 24 #Javascript
用jmSlip编写移动端顶部日历选择控件
Oct 24 #Javascript
微信小程序 富文本转文本实例详解
Oct 24 #Javascript
微信小程序 参数传递详解
Oct 24 #Javascript
10分钟掌握XML、JSON及其解析
Dec 06 #Javascript
JavaScript的new date等日期函数在safari中遇到的坑
Oct 24 #Javascript
南麂列岛(1) SRF-S84(1) 台湾(1) Panasonic(1) 松下(1) MX500(1) PL660(1) 根德(2) S2000(3) SRF-S83(1)
You might like
php将数据库导出成excel的方法
2010/05/07 PHP
thinkphp获取栏目和文章当前位置的方法
2014/10/29 PHP
php计算2个日期的差值函数分享
2015/02/02 PHP
PHP获取文件夹大小函数用法实例
2015/07/01 PHP
PHP正则获取页面所有图片地址
2016/03/23 PHP
php判断文件上传图片格式的实例详解
2017/09/30 PHP
Javascript 布尔型分析
2008/12/22 Javascript
三种检测iPhone/iPad设备方向的方法
2014/04/23 Javascript
使用Node.js为其他程序编写扩展的基本方法
2015/06/23 Javascript
jquery显示loading图片直到网页加载完成的方法
2015/06/25 Javascript
JavaScript手机振动API
2016/06/11 Javascript
js 判断一组日期是否是连续的简单实例
2016/07/11 Javascript
javascript实现鼠标点击页面 移动DIV
2016/12/02 Javascript
jQuery使用ajax方法解析返回的json数据功能示例
2017/01/10 Javascript
详解基于 Nuxt 的 Vue.js 服务端渲染实践
2017/10/24 Javascript
记React connect的几种写法(小结)
2018/09/18 Javascript
Node.js net模块功能及事件监听用法分析
2019/01/05 Javascript
JavaScript设计模式之命令模式实例分析
2019/01/16 Javascript
js+springMVC 提交数组数据到后台的实例
2019/09/21 Javascript
python编程开发之日期操作实例分析
2015/11/13 Python
Django后台管理系统的图文使用教学
2020/01/20 Python
python 匿名函数与三元运算学习笔记
2020/10/23 Python
日本民宿预约平台：STAY JAPAN
2017/07/01 全球购物
SQL面试题
2013/04/30 面试题
员工工作表扬信范文
2014/01/13 职场文书
一个大学生十年的职业规划
2014/01/17 职场文书
大学生毕业自我鉴定范文
2014/02/03 职场文书
致铅球运动员加油稿
2014/02/13 职场文书
2014年单位植树节活动方案
2014/03/23 职场文书
住宅使用说明书
2014/05/09 职场文书
小学生我的梦想演讲稿
2014/08/21 职场文书
行政专员岗位职责范本
2014/08/26 职场文书
2014预防青少年违法犯罪工作总结
2014/12/10 职场文书
2014年个人工作总结模板
2014/12/15 职场文书
教育教学读书笔记
2015/07/02 职场文书
教师廉政准则心得体会
2016/01/20 职场文书