好久没更新小程序电商实战的文章了，是因为最近一直做整体架构调整，一些准备工作也是比较耗费时间的。在这几天将会有新版的 小程序电商教程推出，先透露一下 新版将会以 https 的方式请求动态获取数据来展现，不再是目前的静态页面了 新版也更贴近于实战。这篇购物车因为内容比较多 特别是中间有用到 template 模板的只是点，所以会分文 上下两部分。大家耐心看完哦~~~

购物车效果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: "", name: "日本资生堂洗颜", price: 200, isSelect: false, // 数据设定 count: 2 }, { id: 2, pic: '', name: "倩碧焕妍活力精华露", price: 340, isSelect: false, // 数据设定 count: 1 }, { id: 3, pic: '', name: "特效润肤露", price: 390, isSelect: false, // 数据设定 count: 1 }, { id: 4, pic: '', name: "倩碧水嫩保湿精华面霜", price: 490, isSelect: false, // 数据设定 count: 1 }, { id: 5, pic: '', name: "兰蔻清莹柔肤爽肤水", price: 289, isSelect: false, // 数据设定 count: 1 }, { id: 6, pic: "", name: "LANCOME兰蔻小黑瓶精华", price: 230, isSelect: false, // 数据设定 count: 1 }, ], },

未完待续......

明天将会把购物车用到的 template 模板、选择计算和数量加减的部分实现！

关注我们

如果需要源码可以关注“IT实战联盟”并留言（源码名称+邮箱），小萌看到后会联系作者发送到邮箱，也可以加入交流群和作者互撩哦~~~