IT实战联盟博客：
好久没更新小程序电商实战的文章了，是因为最近一直做整体架构调整，一些准备工作也是比较耗费时间的。在这几天将会有新版的 小程序电商教程推出，先透露一下 新版将会以https的方式请求动态获取数据来展现，不再是目前的静态页面了 新版也更贴近于实战。这篇购物车因为内容比较多 特别是中间有用到template模板的只是点，所以会分文 上下两部分。大家耐心看完哦~~~
购物车效果
购物车效果图.gif
cart.wxml
购物车商品列表布局
<view class="scroll" hidden="{{hidden}}"><scroll-view class="scroll" scroll-y="true"><view class="separate"></view><view wx:for="{{carts}}"><view class="cart_container"> <view wx:if="{{!item.isSelect}}"><icon class="item-select" bindtap="switchSelect" data-index="{{index}}" data-id="{{index}}" type="circle" size="20"></icon></view><view wx:elif="{{item.isSelect}}"><icon class="item-select" bindtap="switchSelect" data-index="{{index}}" data-id="{{index}}" type="success" color="#f0145a" size="20"></icon></view><image class="item-image" src="{{item.pic}}"></image><import src="../template/template.wxml" /><view class="column"><text class="title">{{item.name}}</text><view class="row"><text class="sku-price">￥{{item.price * item.count}}</text><view class="sku"><template is="quantity" data="{{ ...item,index:index}}" /> </view></view></view></view><view class="separate"></view></view></scroll-view></view>
购物车下方合计结算布局
<view class="bottom_total" hidden="{{hidden}}"><view class="bottom_line"></view><view class="row"><view wx:if="{{!isAllSelect}}"><icon class="item-allselect" bindtap="allSelect" type="circle" size="20"></icon></view><view wx:elif="{{isAllSelect}}"><icon class="item-allselect" bindtap="allSelect" type="success" color="#f0145a" size="20"></icon></view><text class="small_text">全选</text><text>合计:￥ </text><text class="price">{{totalMoney}}</text><button class="button-red" bindtap="toBuy" formType="submit">去结算</button></view></view>
备注： 引用的 template 模板部分先不用管 可以注释掉，可以继续往下面看
cart.wxss
@import "../template/template.wxss";page{ background: #f5f5f5; } .cart_container {display: flex;flex-direction: row;background-color: #FFFFFF;margin-bottom: 10rpx;}.scroll {margin-bottom: 120rpx; }.column {display: flex;flex-direction: column;}.row {display: flex;flex-direction: row;align-items: center;/* margin-top: 40rpx; *//* border: 1rpx solid #000000; */}.sku {margin-left: 100rpx;position: absolute;right: 30rpx;margin-top: 30rpx; }.sku-price {color: red;position: relative;margin-top: 30rpx; }.price {color: red;position: relative;}.title {font-size: 38rpx;margin-top: 40rpx;}.small_text {font-size: 28rpx;margin-right: 40rpx;/* margin-left: 10rpx; */margin-left: 25rpx;}.item-select {width: 40rpx;height: 40rpx;margin-top: 90rpx;margin-left: 20rpx;}.item-allselect {width: 40rpx;height: 40rpx; margin-left: 20rpx;margin-top:25rpx; }.item-image {width: 180rpx;height: 180rpx;margin: 20rpx;}.bottom_line {width: 100%;height: 2rpx;background: lightgray;} .bottom_total {position: fixed;display: flex;flex-direction: column;bottom: 0;width: 100%;height: 120rpx;line-height: 120rpx;background: white;/* margin-top: 300rpx; */border-top: 1rpx solid #ccc;}.button-red {background-color: #f0145a; position: fixed;right: 0;color: white;text-align: center;display: inline-block;font-size: 30rpx;border-radius: 0rpx;width: 30%;height: 120rpx;line-height: 120rpx;/* border: 1rpx solid #ccc; */}
备注 @import "../template/template.wxss"; 先不用管 可以注释掉， 后面会有代码
cart.js
#初始化数据data: {hidden:null,hiddenEmpty:true,isAllSelect: false,totalMoney: 0,// 商品详情介绍carts: [{id: 1,pic: "http://mz./files/product/1201/148058328876.jpg",name: "日本资生堂洗颜",price: 200,isSelect: false,// 数据设定count: 2},{id: 2,pic: 'http://mz./files/product/1201/148058301941.jpg',name: "倩碧焕妍活力精华露",price: 340,isSelect: false,// 数据设定count: 1},{id: 3,pic: 'http://mz./files/product/1201/14805828016.jpg',name: "特效润肤露",price: 390,isSelect: false,// 数据设定count: 1},{id: 4,pic: 'http://mz./files/product/1201/148058228431.jpg',name: "倩碧水嫩保湿精华面霜",price: 490,isSelect: false,// 数据设定count: 1},{id: 5,pic: 'http://mz./files/product/1201/148057953326.jpg',name: "兰蔻清莹柔肤爽肤水",price: 289,isSelect: false,// 数据设定count: 1},{id: 6,pic: "http://mz./files/product/1201/148057921620_middle.jpg",name: "LANCOME兰蔻小黑瓶精华",price: 230,isSelect: false,// 数据设定count: 1},],},
未完待续......
明天将会把购物车用到的template模板、选择计算和数量加减的部分实现！
更多精彩内容
IT实战联盟博客：
微信小程序电商实战-入门篇
微信小程序电商实战-首页（上）
微信小程序电商实战-首页（下）
微信小程序电商实战-商品详情（上）
微信小程序电商实战-商品列表流式布局
微信小程序实战篇：基于wxcharts.js绘制移动报表
微信小程序实战篇：商品属性联动选择（案例）
关注我们
如果需要源码可以关注“IT实战联盟”公*众*号并留言（源码名称+邮箱），小萌看到后会联系作者发送到邮箱，也可以加入交流群和作者互撩哦~~~
IT实战联盟博客：
