小程序教程

微信小程序实现购物车页面

字号+ 作者： 来源： 2016-11-23 09:49 我要评论( )

设计思路：

一、从网络上传入以下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

  1. Page({
  2.     data:{
  3.         carts: [
  4.             {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},
  5.             {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},
  6.             {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},
  7.             {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},
  8.             {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},
  9.         ]
  10.     }
  11. })
复制代码

布局文件

  1. <view class="container carts-list">
  2.     <view wx:for="{{carts}}" class="carts-item" data-title="{{item.title}}" data-url="{{item.url}}" bindtap="bindViewTap">
  3.         <view>
  4.           <image class="carts-image" src="{{item.image}}" mode="aspectFill"/>
  5.         </view>
  6.       <view class="carts-text">
  7.         <text class="carts-title">{{item.title}}</text>
  8.         <view class="carts-subtitle">
  9.           <text class="carts-price">{{item.sum}}</text>
  10.           <text>WXStepper</text>
  11.         </view>
  12.       </view>
  13.     </view>
  14. </view>
复制代码

样式表

  1. /*外部容器*/
  2. .container {
  3.     display: flex;
  4.     flex-direction: column;
  5.     align-items: center;
  6.     justify-content: space-between;
  7.     box-sizing: border-box;
  8. }

  10. /*整体列表*/
  11. .carts-list {
  12.     display: flex;
  13.     flex-direction: column;
  14.     padding: 20rpx 40rpx;
  15. }

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

  28. /*左部图片*/
  29. .carts-image {
  30.     width:150rpx;
  31.     height:150rpx;
  32. }


  35. /*右部描述*/
  36. .carts-text {
  37.     width: 100%;
  38.     display: flex;
  39.     flex-direction: column;
  40.     justify-content: space-between;
  41. }

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

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

  59. /*价格*/
  60. .carts-price {
  61.     color: #f60;
  62. }
复制代码

1.2 集成WXStepper

1.2.1 复制组件内容

[2016-10-16]

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

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

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

  1.         minusStatuses: ['disabled', 'disabled', 'normal', 'normal', 'disabled']
复制代码

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

  1.               <view class="stepper">
  2.                 <!-- 减号 -->
  3.                 <text class="{{minusStatuses[index]}}" data-index="{{index}}" bindtap="bindMinus">-</text>
  4.                 <!-- 数值 -->
  5.                 <input type="number" bindchange="bindManual" value="{{item.num}}" />
  6.                 <!-- 加号 -->
  7.                 <text class="normal" data-index="{{index}}" bindtap="bindPlus">+</text>
  8.               </view>
复制代码

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

  1. bindMinus: function(e) {
  2.         var index = parseInt(e.currentTarget.dataset.index);
  3.         var num = this.data.carts[index].num;
  4.         // 如果只有1件了，就不允许再减了
  5.         if (num > 1) {
  6.             num --;
  7.         }
  8.         // 只有大于一件的时候，才能normal状态，否则disable状态
  9.         var minusStatus = num <= 1 ? 'disabled' : 'normal';
  10.         // 购物车数据
  11.         var carts = this.data.carts;
  12.         carts[index].num = num;
  13.         // 按钮可用状态
  14.         var minusStatuses = this.data.minusStatuses;
  15.         minusStatuses[index] = minusStatus;
  16.         // 将数值与状态写回
  17.         this.setData({
  18.             carts: carts,
  19.             minusStatuses: minusStatuses
  20.         });
  21.     },
  22.     bindPlus: function(e) {
  23.         var index = parseInt(e.currentTarget.dataset.index);
  24.         var num = this.data.carts[index].num;
  25.         // 自增
  26.         num ++;
  27.         // 只有大于一件的时候，才能normal状态，否则disable状态
  28.         var minusStatus = num <= 1 ? 'disabled' : 'normal';
  29.         // 购物车数据
  30.         var carts = this.data.carts;
  31.         carts[index].num = num;
  32.         // 按钮可用状态
  33.         var minusStatuses = this.data.minusStatuses;
  34.         minusStatuses[index] = minusStatus;
  35.         // 将数值与状态写回
  36.         this.setData({
  37.             carts: carts,
  38.             minusStatuses: minusStatuses
  39.         });
  40.     },
复制代码

效果如图：

[2016-10-17]

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

1.3 集成LXCheckboxGroup

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

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

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

复选框居中

  1. /*复选框样式*/
  2. .carts-list icon {
  3.     margin-top: 60rpx;
  4.     margin-right: 20rpx;
  5. }
复制代码

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

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

效果图：

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

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

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

  1.     <view class="carts-footer">
  2.         <view bindtap="bindSelectAll">
  3.             <icon wx:if="{{selectedAllStatus}}" type="success_circle" size="20"/>
  4.             <icon wx:else type="circle" size="20" />
  5.             <text>全选</text>
  6.         </view>
  7.         <view class="button">立即结算</view>
  8.     </view>
复制代码

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

  1.     display: flex;
  2.     flex-direction: row;
  3.     justify-content: space-between;
复制代码

样式表


  2. /*底部按钮*/
  3. .carts-footer {
  4.     width: 100%;
  5.     height: 80rpx;
  6.     display: flex;
  7.     flex-direction: row;
  8.     justify-content: space-between;
  9. }

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

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

  23. /*立即结算按钮*/
  24. .carts-footer .button {
  25.     line-height: 80rpx;
  26.     text-align: center;
  27.     width:220rpx;
  28.     height: 80rpx;
  29.     background-color: #f60;
  30.     color: white;
  31.     font-size: 36rpx;
  32.     border-radius: 0;
  33.     border: 0;
  34. }
复制代码

1.4.2 全选与全不选事件

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

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

  1. selectedAllStatus: false
复制代码

事件实现：

  1.     bindSelectAll: function() {
  2.         // 环境中目前已选状态
  3.         var selectedAllStatus = this.data.selectedAllStatus;
  4.         // 取反操作
  5.         selectedAllStatus = !selectedAllStatus;
  6.         // 购物车数据，关键是处理selected值
  7.         var carts = this.data.carts;
  8.         // 遍历
  9.         for (var i = 0; i < carts.length; i++) {
  10.             carts[i].selected = selectedAllStatus;
  11.         }
  12.         this.setData({
  13.             selectedAllStatus: selectedAllStatus,
  14.             carts: carts
  15.         });
  16.     }
复制代码

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

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

  1. <toast hidden="{{toastHidden}}" bindchange="bindToastChange">
  2.     {{toastStr}}
  3. </toast>
复制代码

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

  1.     bindCheckout: function() {
  2.         // 初始化toastStr字符串
  3.         var toastStr = 'cid:';
  4.         // 遍历取出已勾选的cid
  5.         for (var i = 0; i < this.data.carts.length; i++) {
  6.             if (this.data.carts[i].selected) {
  7.                 toastStr += this.data.carts[i].cid;
  8.                 toastStr += ' ';
  9.             }
  10.         }
  11.         //存回data
  12.         this.setData({
  13.             toastHidden: false,
  14.             toastStr: toastStr
  15.         });
  16.     },
  17.     bindToastChange: function() {
  18.         this.setData({
  19.             toastHidden: true
  20.         });
  21.     }
复制代码

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 加入

  1.     position: fixed;
  2.     bottom: 0;
  3.     border-top: 1px solid #eee;
复制代码

1.6 汇总

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

total: ''

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

1.6.2 通用汇总函数

  1.     sum: function() {
  2.         var carts = this.data.carts;
  3.         // 计算总金额
  4.         var total = 0;
  5.         for (var i = 0; i < carts.length; i++) {
  6.             if (carts[i].selected) {
  7.                 total += carts[i].num * carts[i].price;
  8.             }
  9.         }
  10.         // 写回经点击修改后的数组
  11.         this.setData({
  12.             carts: carts,
  13.             total: '￥' + total
  14.         });
  15.     }
复制代码

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

如图：


　

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 微信小程序 轮播图 swiper图片组件

    微信小程序 轮播图 swiper图片组件

    2016-11-23 09:49

  • 微信小程序 开发 微信开发者工具 快捷键

    微信小程序 开发 微信开发者工具 快捷键

    2016-11-23 09:49

  • 微信小程序 页面跳转 传递参数

    微信小程序 页面跳转 传递参数

    2016-11-23 09:49

  • 微信小程序 如何获取时间

    微信小程序 如何获取时间

    2016-11-23 09:49

网友点评
精彩导读
2-HelloWorld微信小程序

2-HelloWorld微信小程序

微信小程序 轮播图 swiper图片组件

微信小程序 轮播图 swiper图片组件

微信小程序开发记账应用实战服务端之用户注册与登录

微信小程序开发记账应用实战服务端之用户注册

微信小程序倒计时组件

微信小程序倒计时组件

微信小程序实现购物车页面

微信小程序实现购物车页面

热门资讯
Copyright © 2006-2018 www.h5cn.com.H5之家 版权所有 Power by h5cn 备案： 黔ICP备15004751-2
HTML5入门 HTML5技术 canvas教程 专题学习