<_小程序模拟淘宝购物车">
devbox
花生_TL007
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

微信小程序模仿购物车页面_小程序模拟淘宝购物车

作者：花生_TL007 | 2024-05-01 05:08:03

赞

踩

小程序模拟淘宝购物车

本篇抽取demo部分功能展示，在文章结尾附上完整DEMO

微信小程序其它功能介绍

一、效果图：

二、.WXML代码示例,

  1. <view class="main">
  2.     <view wx:if="{{hasList}}">
  3.         <view class="cart-box">
  4.             <view class="cart-list" wx:for="{{carts}}" wx:key="{{index}}">
  5.                 <icon wx:if="{{item.selected}}" type="success" color="red" data-index="{{index}}"  class="cart-pro-select" bindtap="selectList"/>
  6.                 <icon wx:else type="circle" class="cart-pro-select" data-index="{{index}}" bindtap="selectList"/>
  7.                 <navigator url="../details/details?id={{item.id}}"><image class="cart-thumb" src="{{item.image}}"></image></navigator>
  8.                 <text class="cart-pro-name">{{item.title}}</text>
  9.                 <text class="cart-pro-price">￥{{item.price}}</text>
  10.                 <view class="cart-count-box">
  11.                     <text class="cart-count-down" bindtap="minusCount" data-obj="{{obj}}" data-index="{{index}}">-</text>
  12.                     <text class="cart-count-num">{{item.num}}</text>
  13.                     <text class="cart-count-add" bindtap="addCount" data-index="{{index}}">+</text>
  14.                 </view>
  15.                 <text class="cart-del" bindtap="deleteList" data-index="{{index}}">×</text>
  16.             </view>
  17.         </view>
  18.  
  19.         <view class="cart-footer">
  20.             <icon wx:if="{{selectAllStatus}}" type="success_circle" color="#fff" class="total-select" bindtap="selectAll"/>
  21.             <icon wx:else type="circle" color="#fff" class="total-select" bindtap="selectAll"/>
  22.             <view class="order-icon">
  23.                 <navigator url="../orders/orders"><image src="/image/icon3.png"></image></navigator>
  24.             </view>
  25.             <text>全选</text>
  26.             <text class="cart-toatl-price">￥{{totalPrice}}</text>
  27.         </view>
  28.     </view>
  29.     <view wx:else>
  30.         <view class="cart-no-data">购物车是空的哦~</view>
  31.     </view>
  32. </view>

二、.JS代码示例

  1.  
  2. Page({
  3.   data: {
  4.     carts: [], // 购物车列表
  5.     hasList: false, // 列表是否有数据
  6.     totalPrice: 0, // 总价，初始为0
  7.     selectAllStatus: true, // 全选状态，默认全选
  8.     obj: {
  9.       name: "hello"
  10.     }
  11.   },
  12.   onShow() {
  13.     this.setData({
  14.       hasList: true,
  15.       carts: [ //模拟数据
  16.         {
  17.           id: 1,
  18.           title: '测试土豆 1斤',
  19.           image: '/pages/images/s5.png',
  20.           num: 4,
  21.           price: 10.00,
  22.           selected: true
  23.         },
  24.         {
  25.           id: 2,
  26.           title: '测试黑米 1斤',
  27.           image: '/pages/images/s6.png',
  28.           num: 1,
  29.           price: 5.0,
  30.           selected: true
  31.         }
  32.       ]
  33.     });
  34.     this.getTotalPrice();
  35.   },
  36.   /**
  37.    * 当前商品选中事件
  38.    */
  39.   selectList(e) {
  40.     const index = e.currentTarget.dataset.index;
  41.     let carts = this.data.carts;
  42.     const selected = carts[index].selected;
  43.     carts[index].selected = !selected;
  44.     this.setData({
  45.       carts: carts
  46.     });
  47.     this.getTotalPrice();
  48.   },
  49.  
  50.   /**
  51.    * 删除购物车当前商品
  52.    */
  53.   deleteList(e) {
  54.     const index = e.currentTarget.dataset.index;
  55.     let carts = this.data.carts;
  56.     carts.splice(index, 1);
  57.     this.setData({
  58.       carts: carts
  59.     });
  60.     if (!carts.length) {
  61.       this.setData({
  62.         hasList: false
  63.       });
  64.     } else {
  65.       this.getTotalPrice();
  66.     }
  67.   },
  68.  
  69.   /**
  70.    * 购物车全选事件
  71.    */
  72.   selectAll(e) {
  73.     let selectAllStatus = this.data.selectAllStatus;
  74.     selectAllStatus = !selectAllStatus;
  75.     let carts = this.data.carts;
  76.  
  77.     for (let i = 0; i < carts.length; i++) {
  78.       carts[i].selected = selectAllStatus;
  79.     }
  80.     this.setData({
  81.       selectAllStatus: selectAllStatus,
  82.       carts: carts
  83.     });
  84.     this.getTotalPrice();
  85.   },
  86.  
  87.   /**
  88.    * 绑定加数量事件
  89.    */
  90.   addCount(e) {
  91.     const index = e.currentTarget.dataset.index;
  92.     let carts = this.data.carts;
  93.     let num = carts[index].num;
  94.     num = num + 1;
  95.     carts[index].num = num;
  96.     this.setData({
  97.       carts: carts
  98.     });
  99.     this.getTotalPrice();
  100.   },
  101.  
  102.   /**
  103.    * 绑定减数量事件
  104.    */
  105.   minusCount(e) {
  106.     const index = e.currentTarget.dataset.index;
  107.     const obj = e.currentTarget.dataset.obj;
  108.     let carts = this.data.carts;
  109.     let num = carts[index].num;
  110.     if (num <= 1) {
  111.       return false;
  112.     }
  113.     num = num - 1;
  114.     carts[index].num = num;
  115.     this.setData({
  116.       carts: carts
  117.     });
  118.     this.getTotalPrice();
  119.   },
  120.  
  121.   /**
  122.    * 计算总价
  123.    */
  124.   getTotalPrice() {
  125.     let carts = this.data.carts; // 获取购物车列表
  126.     let total = 0;
  127.     for (let i = 0; i < carts.length; i++) { // 循环列表得到每个数据
  128.       if (carts[i].selected) { // 判断选中才会计算价格
  129.         total += carts[i].num * carts[i].price; // 所有价格加起来
  130.       }
  131.     }
  132.     this.setData({ // 最后赋值到data中渲染到页面
  133.       carts: carts,
  134.       totalPrice: total.toFixed(2)
  135.     });
  136.   }
  137.  
  138. })

三、.XWSS代码示例

  1.  
  2.  
  3. .cart-box{
  4.     padding-bottom: 100rpx;
  5. }
  6. .cart-list{
  7.     position: relative;
  8.     padding: 20rpx 20rpx 20rpx 285rpx;
  9.     height: 185rpx;
  10.     border-bottom: 1rpx solid #e9e9e9;
  11. }
  12. .cart-list .cart-pro-select{
  13.     position: absolute;
  14.     left: 20rpx;
  15.     top: 90rpx;
  16.     width: 45rpx;
  17.     height: 45rpx;
  18. }
  19.  
  20. .cart-list .cart-thumb{
  21.     position: absolute;
  22.     top: 20rpx;
  23.     left: 85rpx;
  24.     width: 185rpx;
  25.     height: 185rpx;
  26. }
  27. .cart-list .cart-pro-name{
  28.     display: inline-block;
  29.     width: 300rpx;
  30.     height: 105rpx;
  31.     line-height: 50rpx;
  32.     overflow: hidden;
  33. }
  34. .cart-list .cart-pro-price{
  35.     display: inline-block;
  36.     float: right;
  37.     height: 105rpx;
  38.     line-height: 50rpx;
  39. }
  40. .cart-list .cart-count-box{
  41.     position: absolute;
  42.     left: 285;
  43.     bottom: 20rpx;
  44.     width: 250rpx;
  45.     height: 80rpx;
  46. }
  47. .cart-list .cart-count-box text{
  48.     display: inline-block;
  49.     line-height: 80rpx;
  50.     text-align: center;
  51. }
  52. .cart-count-down,.cart-count-add{
  53.     font-size: 44rpx;
  54.     width: 50rpx;
  55.     height: 100%;
  56. }
  57. .cart-count-num{
  58.     width: 150rpx;
  59. }
  60. .cart-del{
  61.     position: absolute;
  62.     right: 20rpx;
  63.     bottom: 20rpx;
  64.     width: 80rpx;
  65.     height: 80rpx;
  66.     line-height: 80rpx;
  67.     text-align: center;
  68.     font-size: 44rpx;
  69. }
  70. .cart-footer{
  71.     position: fixed;
  72.     bottom: 0;
  73.     left: 0;
  74.     width: 100%;
  75.     height: 90rpx;
  76.     line-height: 90rpx;
  77.     padding:0 100rpx 0 80rpx;
  78.     box-sizing: border-box;
  79.     background: #AB956D;
  80.     color: #fff;
  81. }
  82. .total-select{
  83.     position: absolute;
  84.     left: 20rpx;
  85.     top: 25rpx;
  86.     width: 45rpx;
  87.     height: 45rpx;
  88. }
  89. .order-icon{
  90.     position: absolute;
  91.     right: 40rpx;
  92.     top: 25rpx;
  93.     width: 45rpx;
  94.     height: 45rpx;
  95. }
  96. .order-icon image,.order-icon navigator{
  97.   display: block;
  98.   width: 45rpx;
  99.   height: 45rpx;
  100. }
  101. .cart-toatl-price{
  102.     float: right;
  103.     width: 120rpx;
  104. }
  105.  
  106. .cart-no-data{
  107.     padding:40rpx 0;
  108.     color: #999;
  109.     text-align: center;
  110. }

 四、.JSON代码示例

  1. {
  2.   "navigationBarTitleText": "购物车"
  3. }

   DEMO

                                                     -END

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/花生_TL007/article/detail/517166
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。